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);
答案 0 :(得分:2)
您的问题是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 强>