HTML5 Canvas - 重复所有画布大小的文本答案

【问题标题】：HTML5 Canvas - repeat text all the canvas sizeHTML5 Canvas - 重复所有画布大小的文本
【发布时间】：2016-01-24 15:35:34
【问题描述】：

有没有办法在 cavnas 内绘制所有大小的内容？我已经检查过我可以重复一张图片，但我只想重复一段文字。

另外，如果文本可以每行移动，那就太好了。如果我将“1234567”设置为文本，我需要的效果示例：

1234567 1234567 1234567 1234567 1234567 1234567
234567 1234567 1234567 1234567 1234567 1234567 
34567 1234567 1234567 1234567 1234567 1234567 1
4567 1234567 1234567 1234567 1234567 1234567 12
567 1234567 1234567 1234567 1234567 1234567 123
67 1234567 1234567 1234567 1234567 1234567 1234
7 1234567 1234567 1234567 1234567 1234567 12345
 1234567 1234567 1234567 1234567 1234567 123456
1234567 1234567 1234567 1234567 1234567 1234567

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

measureText(txt)

您可以使用画布测量文本

canvas.measureText(txt).width

这是一个具有各种限制的基本示例。需要更多的数学来创建更大的画布......

txtHeight 基本上是行高。 offset 是您要移动文本的距离。

剩下的就是数学，应该针对一个实体函数进行改进。

代码

var b = document.createElement('canvas');
b.width = 320;
b.height = 160;
c = b.getContext("2d");

function draw(txt) {
  c.font = "20px Arial";
  var txtHeight = 25;
  var offset = 5;
  var w = Math.ceil(c.measureText(txt).width);
  var txt = new Array(w * 2).join(txt + ' '); //change the multipler for more lines
  for (var i = 0; i < Math.ceil(b.height / txtHeight); i++) {
    c.fillText(txt, -(i * offset), i * txtHeight);
  }
}
document.body.appendChild(b);
draw('1234567');

演示

https://jsfiddle.net/wav0xmLz/1/

为了更精确地测量每一行或每个字母写一个字母会更好。

编辑

除非您使用 等宽字体，否则删除一半可见的 txt 会很麻烦......因为每个字母都有不同的间距。对于非等宽字体，iiii 总是比 TTTT 短。

monospaced fonts 有一个固定的间距...。找到它，您就知道每个字符的确切宽度...做一些数学运算，您就完成了。

然后您可以使用split,shift,join,push 创建每一行

https://jsfiddle.net/kds7zkkf/

【讨论】：

【解决方案2】：

这里是部分答案。只是第一部分。

CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {

  var lines = text.split("\n");

  for (var i = 0; i < lines.length; i++) {

    var words = lines[i].split(' ');
    var line = '';

    for (var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = this.measureText(testLine);
      var testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        this.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      } else {
        line = testLine;
      }
    }

    this.fillText(line, x, y);
    y += lineHeight;
  }
};



var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

ctx.font = "12px sans-serif";
ctx.textBaseline = "top";
var str = '';
for (var i = 0; i < 100; i++) {
  str += '1234567 ';
}
ctx.wrapText(str,0,0,myCanvas.width,16);

canvas {
  border:1px solid red;  
}

&lt;canvas id="myCanvas" width="400" height="200"&gt;&lt;/canvas&gt;

参考：HTML5 canvas ctx.fillText won't do line breaks?

【讨论】：