HTML5キャンバスで線をクリア

Question

行をストロークさせる方法はありますか？ 私のキャンバスには、不透明度0.5、幅20ピクセルのラインがあります。 私はそれをもっと長くしたい、古いものからすぐに別の線を描くことを意味します。 これを実行すると、古い行と新しい行のマッチングポイントが透明になりません（2行で作成されているため）。 私は古い行を取り除き、新しい行をストロークしたいと思います。

どうすればいいですか？

おかげ

Answer 1

キャンバスに描画する方法はAPIによって厳密に定義されますが、ソフトウェアやハードウェアでどのように行われるかはブラウザの開発者次第です。ハードウェアアクセラレーションを使用しているブラウザや、他のブラウザではatmで作業しています。 （ソフトウェアレンダラatmを使用するなど）

何かを描くときにコンピュータグラフィックスで、バッファに描画します。また、lineToとstrokeを呼び出すと、バッファが更新され、基礎となるピクセルのすべての情報が失われます（または透明部分を使用すると部分的に失われます）。元に戻すことで元に戻す方法はありません（ただし、古い図面の、しかしそれは記憶のために本当に重いでしょう）。

だからCPU/GPU時間の多くを救うかもしれないストロークを元に戻すことはできするのではなく、多額のメモリ

Answer 2

私は単に（clearRectを使用して）全体のキャンバスをクリアして、ちょうど

Answer 3

もう一度clearRect()を全体の線を引くことであろう最も簡単な方法は、それを行うための唯一の方法であると仮定します。これを回避するには、キャンバスに多くの要素が描画されている場合は、絶対配置を使用して2つのキャンバスをHTMLにオーバーレイし、「静的」描画用のキャンバスと計画する図面の最上位レイヤーを使用しますクリア/再描画する。これにより、すべてのキャンバスを再び描画するCPU時間が節約されます。

Answer 4

別のエレガントなオプションは、「XOR」から「globalCompositeOperation」を設定し、再びラインペイントしているが増加whould。 ...それは削除されます