javascript - HTML5 Canvas - 重复所有 Canvas 大小的文本

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

Answer 1

measureText(txt)

您可以使用 Canvas 测量文本

canvas.measureText(txt).width

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

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/