canvas - 在画布图像上写一段超过2行的段落

Question

JS 小提琴： http: //jsfiddle.net/amaan/WxmQR/1/ 我想知道用户何时按下 Enter 如何将画布上的文本移至下一行。目前，它仅将所有内容写在一行中。谢谢你。

示例代码：

var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');

document.getElementById('text').addEventListener('keyup', function (){
tCtx.canvas.width = tCtx.measureText(this.value).width;
tCtx.fillText(this.value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();    
}, false);

Answer 1

你的问题是fillText不太关心\n. 因此，您需要更改keyup处理程序以检测文本中有多少换行符，然后通过移动 y 坐标来相应地呈现它。

因此，在keyup处理程序中，添加

...
var t = this.value.split('\n');
tCtx.height = t.length * 10;

var y = 10;
for(var i=0; i<t.length; i++, y+=10) {
    tCtx.fillText(t[i], 0, y);
}
...

工作示例。