收藏
回答

Canvas 文字设置换行和行高问题?

请问Canvas怎么设置文字换行和行高啊? 好像api没看到,自己试了\r\n也没什么用。
如果没有的话,如果我想做这种证书类的只能一行一行绘制吗?


回答关注问题邀请回答
收藏

1 个回答

  • var 友原
    var 友原
    2019-09-04
    /*
    str:要绘制的字符串
    canvas:canvas对象
    initX:绘制字符串起始x坐标
    initY:绘制字符串起始y坐标
    lineHeight:字行高,自己定义个值即可
    canvasWidth:文本宽度
    lines: 行数
    */
    function canvasTextAutoLine(str, canvas, initX, initY, lineHeight, canvasWidth, lines) {
      var ctx = canvas.getContext("2d");
      var lineWidth = 0;
      var lastSubStrIndex = 0;
      var beginLineHeight = lineHeight;
      var beginY = initY;
      for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;
        if (lineWidth > canvasWidth - initX) { //减去initX,防止边界出现的问题
          if (initY >= beginY + beginLineHeight * (lines-1)) {
            ctx.fillText(str.substring(lastSubStrIndex, i - 1) + '...', initX, initY);
            return;
          } else {
            ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
            initY += lineHeight;
            lineWidth = 0;
            lastSubStrIndex = i;
          }
        }
        if (i == str.length - 1) {
          ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
        }
      }
    }

    参考一下

    2019-09-04
    有用
    回复 4
    • ...
      ...
      2019-09-04
      谢了 大概知道你的思路了,我自己在加个\n换行的判断看看
      2019-09-04
      回复
    • var 友原
      var 友原
      2019-09-04回复...
      你这是累加了吧
      2019-09-04
      回复
    • ...
      ...
      2019-09-04回复var 友原
      恩 没注意到你是lineWidth +=
      2019-09-04
      回复
    • ×
      ×
      2021-05-17
      大佬,问一下,如果是不同字体大小想要在一行显示并且底部对齐怎么办?我试了bottom,ios上是正常的,到了Android上就不正常了,在上下会多出一部分的高度
      2021-05-17
      回复
登录 后发表内容
问题标签