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 

Answer 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有一个固定的间距....找到，你确切知道每个charachter的宽度是多少...做一些数学和你的完成。

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

https://jsfiddle.net/kds7zkkf/

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 won't do line breaks?