canvas横排竖排显示数字 

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>fillText Auto-wrap</title>
</head>

<body>
  <div>--------横排处理--------</div>
  <br>
  <canvas id="mycanvasL">您的浏览器不支持canvas。</canvas>
  <br>
  <textarea id="inputL" row="6" col="60" placeholder="请输入电话号码" style="width:300px;height: 60px;"></textarea>
  <br>
  <div>--------竖排处理--------</div>
  <br>
  <canvas id="mycanvas">您的浏览器不支持canvas。</canvas>
  <br>
  <textarea id="input" row="6" col="60" placeholder="请输入电话号码" style="width:300px;height: 60px;"></textarea>
</body>

</html>
<script>
  // 横排处理
  function writeTextOnCanvasL(name) {
    var cns = document.getElementById('mycanvasL');
    var ctx = cns.getContext("2d");
    cns.width = '800';
    cns.height = '100'
    ctx.font = "80px 微软雅黑";
    ctx.fillStyle = "#000";
    ctx.fillText(name,10,80);
  }
  // writeTextOnCanvasL('88100000');
  document.getElementById("inputL").onkeyup = function() {
    // 88100000
    writeTextOnCanvasL(this.value);
  }

  // 竖排处理
  function writeTextOnCanvas(name) {
    var cns = document.getElementById('mycanvas');
    var ctx = cns.getContext("2d");
    cns.width = '100';
    cns.height = '660'
    // ctx.width = '100';
    // ctx.height = '800';
    // let name = name; // 文本内容
    let x = 10,y=100; // 文字开始的坐标
    let letterSpacing = 20; // 设置字间距
    for(let i = 0; i < name.length; i++){
        const str = name.slice(i,i+1).toString();
        if(str.match(/[A-Za-z0-9]/)&&(y<576)){ // 非汉字 旋转
            ctx.font = "80px 微软雅黑";
            ctx.fillStyle = "#000";
            ctx.save();
            ctx.translate(x,y);
            ctx.rotate(Math.PI/180);
            ctx.textBaseline = 'bottom';
            ctx.fillText(str,0,0);
            ctx.restore();
            y+=ctx.measureText(str).width+letterSpacing; // 计算文字宽度
        }else if(str.match(/[\u4E00-\u9FA5]/)&&(y<576)){
            // ctx.save();
            // ctx.textBaseline = 'top';
            // ctx.fillText(str,x,y);
            // ctx.restore();
            // y+=ctx.measureText(str).width+letterSpacing; // 计算文字宽度
        } else {
        }
    }
  }
  // writeTextOnCanvas('88100000');
  document.getElementById("input").onkeyup = function() {
    // 88100000
    writeTextOnCanvas(this.value);
  }
</script>

 

posted @ 2021-05-07 11:25  王希有  阅读(588)  评论(0)    收藏  举报