HTML5画布 - 在整个画布上重复文本

Question

有没有一种方法可以在画布内绘制与其大小相同的所有内容？我已经检查过可以重复图像，但我只想重复文本。

此外，如果文本每行都能移动，那就太棒了。如果将“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

- JoséMi

Answer 1

measureText(txt)

你可以使用canvas来测量文本

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/

为了更精确地测量，每行或每个字母写得更清晰更好。

编辑

除非您使用等宽字体，否则删除一半可见文本会很混乱...因为每个字母的间距都不同。iiii总是比TTTT短，而非等宽字体则不然。

等宽字体具有固定间距....找到它，就可以确切知道每个字符的宽度...做些数学计算，就完成了。

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

https://jsfiddle.net/kds7zkkf/

- cocco

Answer 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;  
}

<canvas id="myCanvas" width="400" height="200"></canvas>

参考文献：HTML5 canvas ctx.fillText无法换行？

- Mosh Feu