javascript - キャンバス内の前の画像を削除するには

Question

ボタンをクリックして絵を描くキャンバスがあり、別のボタンをクリックして別のイメージを描きたいです。問題は、キャンバスの前の画像を削除して新しい画像をロードするにはどうすればよいですか? 例はありますか？

Answer 1

キャンバスをクリアする 1 つの方法は、キャンバス全体に四角形を描画して、以前に存在していたものを削除することです。

context.clearRect (0, 0, width, height);

もう 1 つの方法は、キャンバス自体の幅をリセットすることです。

canvas.width = canvas.width

私は通常clearrect、キャンバスの表面を単純にクリアするメソッドを使用しますが、他のメソッドは変換などの他のあらゆる種類のものをリセットします。また、メソッドの方が高速であるとどこかで読んだと思いますclearrectが、それはあなたが望むものに依存します。

余談ですが、キャンバスを完全にクリアするのではなく、前の画像または背景画像に戻したいことがよくあります。これは、画面に表示されない別のキャンバスをキャッシュとして使用することによって最も効率的に実行されます。次に、表示されているキャンバスをクリアして以前の状態に戻したい場合は、 を使用してキャッシュから画像を描画するだけですdrawImage。これは、設定された背景や以前の状態を再計算するよりもはるかに効率的です。