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

HTML5 Canvas - repeat text all the canvas size

本文关键字：布大小 文本 画布 HTML5      更新时间：2023-09-26

有没有办法在卡夫纳斯内部绘制所有大小？我已经检查过我可以重复图像，但我只想重复文本。

另外，如果文本可以每行移动，那就太好了。如果我将"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

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短。

等宽字体具有固定的间距....找到它，你就会确切地知道每个字符的宽度......做一些数学运算并完成。

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

https://jsfiddle.net/kds7zkkf/

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

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 不会做换行符吗？

相关文章：