在畫布上寫入一段超過2行的圖像

JS小提琴：http://jsfiddle.net/amaan/WxmQR/1/我想知道用戶何時按下輸入如何將畫布上的文本輸入到下一行。目前它唯一的一行都寫在一起。謝謝。在畫布上寫入一段超過2行的圖像

示例代碼：

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

來源

2013-01-08 shabbir.rang

你可以使用'\ n'分割從'textarea'獲得的'value'。然後你有一個數組，其長度表示單獨的行數，並可以相應地繪製文本。 http://jsfiddle.net/h9uaQ/ – Rikonator

您的問題是fillText不會在乎\n。因此，您需要更改處理程序以檢測文本中有多少換行符，然後通過移動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。

來源

2013-01-08 14:59:33 Rikonator

在畫布上寫入一段超過2行的圖像

回答

相關問題