HTML5 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.measureText(txt).width

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

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

剩下的就是数学，应该改进以获得可靠的功能。

代码

canvas.measureText(txt).width

演示

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

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

编辑

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

等宽字体有固定的间距......找到它，你就知道每个字符的宽度......做一些数学，你就完成了。

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

https://jsfiddle.net/kds7zkkf/