0

JSフィドル： http： //jsfiddle.net/amaan/WxmQR/1/ ユーザーがEnterキーを押したときに、キャンバス上のテキストを次の行に移動する方法を知りたいです。現在、すべてを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);
4

1 に答える 1

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

実例。

于 2013-01-08T14:59:33.570 に答える