HTML5キャンバス - ペイントアプリケーションの不透明性問題

Question

キャンバスを使用してペイントアプリケーションをプログラミングしようとしています。 マウスを押したときの接続線による動作です。 ラインが不透明なときはうまく動作しますが、alphaパラメータを変更すると問題が発生します。

：

は、私は2つのオプションを試してみました。パスは、マウスが最初に停止したときに始まり、マウスが再び上がったときに終了します。 マウスを動かすたびにstroke（）関数が呼び出されます。ストロークが透明であるため、ストローク（）が何度も呼び出され、パス全体が何度も繰り返されるため、パス全体の始まりが不透明になり、終わりになりません。

b。パスはマウスの移動のたびに終了し、終了します。 行全体が透明ですが、すべてのパスとパスの一致点は透明ではありません（2行で構成されているため）。そのため、全体の経路は堅実ではありません。

私が良い結果を得る唯一の方法は、マウスが再び上がったときだけstroke（）を呼び出す場合です。パス全体をうまくストロークしますが、実際に描画している間は何も見えません。

私は何ができますか？

おかげ

Answer 1

私はあなたの最善の策は、あなたの主なキャンバスの上に（絶対位置を使用して）位置する第2のオーバーレイキャンバスを作成することだと思います。

マウスドラッグ中に、すべてのmousemoveイベントに対して、clearRect（）を使用してオーバーレイキャンバスをクリアし、ストロークインプログレス全体を描画します。

mouseupが表示されたら、オーバーレイを消去して、ストローク全体をプライマリキャンバスに描画します。

はここに住んで例を示します

http://jsfiddle.net/rnNFB/1/