javascript - 他のすべての線を再描画することなく、キャンバスにペンツールでスムーズに線を引く

Question

キャンバス上のすべての要素を再描画しないようにする方法はありますか (そのため、すべてを追跡する必要はありません)、現在描画されている線でスムーズに描画できますか?

Answer 1

これは非常に良い質問ですが、あいまいな表現です。今後は質問文言に気をつけてください。

通常、滑らかな線を描く場合は、最初から線を引き直す必要があります。

ただし、次の操作に従う必要があるため、最初からすべてを再描画する必要はありません。

1. 現在のキャンバスをメモリ内キャンバスに保存します
2. 新しい線を描き始める
3. 絵を描いているときは、常に次のことを行っています。
   • キャンバスをクリアする
   • インメモリ キャンバスからメイン キャンバスへの描画
   • ここまでの線引き
4. ラインが終了したら、新しいキャンバスをインメモリ キャンバスに保存し、このプロセスを繰り返します。

（ポイントに関して）追跡する必要がある唯一の行は、「現在の」行です。すべての古い行は、メモリ内キャンバスを介してビットマップに保存されます。

これは私がずっと前に作成した例で、特に滑らかな線を扱っています。私は他の誰かのコードから始めたので、コード構成は奇妙ですが、基本的な考え方はわかるはずです:

http://jsfiddle.net/NWBV4/10/

上で説明した描画部分は、mousemove で見られます。

this.mousemove = function(ev) {
    if (tool.started) {
        context.clearRect(0, 0, 300, 300);
        // put back the saved content
        context.drawImage(memCanvas, 0, 0);
        tool.points.push({
            x: ev._x,
            y: ev._y
        });
        drawPoints(context, tool.points);
    }
};