Question

JS小提琴： http://jsfiddle.net/amaan/WxmQR/1/我想知道用户何时按下输入如何将画布上的文字转到下一行。目前它只在一条线上写一切。谢谢。

示例代码：

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);
}
...

<强> Working Example

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

1 个答案: