htmlキャンバスから画像を元に戻したり、隠したり、削除したり、削除する方法は？

Question

this.context.drawImage(myimage, 0, 0); 

イメージをキャンバスに置くことは、ウェブ上でかなりうまくカバーされています。 しかし、それを削除したらどうしたらいいですか？

Answer 1

オプション1：
背景と同じ色の矩形を描画します。

オプション2（非自明な背景で動作しますが、遅い）：キャンバスから Get the pixel data
画像を描画する前に、イメージを除去するために、その画素データを再描画します。

Answer 2

キャンバスは、即時描画面です。つまり、そのコマンド（drawImageまたはfillRect）でコマンドを実行すると、そのコマンドが実行され、今行ったことはありません。何かを元に戻すことはありません。

キャンバスの「削除」のようなことがないので、検索するのは苦労しました。知っているのは、どこかの色のピクセルがあることです。です。どこには分かりません。

は、次の2つの方法一般的に存在し、ビットを簡素化するには、次の、あなたが描かれ

使用2つのキャンバスを望んでいないものを

1. クリアキャンバス全体が、1枚の画像を除くすべての上に再びすべてを描くこと画像だけを持っていて、他のものはすべて持っています。このキャンバスをclearRect（0,0、width、height）でクリアすると、完了です。

キャンバスに描画したものを追跡しなければならない場合があることに気付くでしょう。その一部を選択的に削除または再配置する必要があるかもしれません。オブジェクトの永続性を頼りにしたり、直接描画面から保持された描画面にキャンバスを変えたりすることは、多くのキャンバスライブラリが行うことです。自分でやりたいのであれば、始めようと手伝ってくれる人はtutorailsです。

ライブラリを調べる場合は、easel.jsをご覧ください。それはかなり学ぶことができます。

Answer 3

私はキャンバスをクリアするためのすばやく簡単な方法を考え出しました。私はちょうど<canvas>タグを<p>のタグとIDの間に入れて、キャンバスをクリアする必要があるたびにinnerHTMLを変更して<p>タグを再レンダリングしました。