收藏
回答

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

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


最后一次编辑于  09-04
回答关注问题邀请回答
收藏

1 个回答

  • var 友原
    var 友原
    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);
        }
      }
    }

    参考一下

    09-04
    赞同
    回复 3
    • ...
      ...
      09-04
      谢了 大概知道你的思路了,我自己在加个\n换行的判断看看
      09-04
      回复
    • var 友原
      var 友原
      09-04回复...
      你这是累加了吧
      09-04
      回复
    • ...
      ...
      09-04回复var 友原
      恩 没注意到你是lineWidth +=
      09-04
      回复
问题标签