1

Canvas を使用してペイント アプリケーションをプログラムしようとしています。それが機能する方法は、マウスが押されたときの接続線によるものです。線が不透明な場合はうまく機能しますが、アルファ パラメータを変更すると問題が発生します。

私は2つのオプションを試しました:

を。パスは、マウスが最初に押されたときに始まり、マウスが再び押されたときに終了します。マウスを動かすたびに、 stroke() 関数が呼び出されます。線が透明であるため、パス全体の始まりは不透明になり、最後は不透明になりません。なぜなら、 stroke() が何度も呼び出され、パス全体が何度も描画されたためです。

b. パスは、マウスのすべての移動で開始および終了します。線は全体を通して透明ですが、すべてのパスとパスの間の一致点は透明度が低くなります (2 本の線で構成されているため)。そのため、パス全体がしっかりしていません。

良い結果を得る唯一の方法は、マウスが再び上にあるときにだけ stroke() を呼び出すことです。その後、パス全体をうまくストロークしますが、実際に描いている間は何も見えません。

私に何ができる?

ありがとう

4

1 に答える 1

6

最善の策は、プライマリ キャンバスの上に (絶対配置を使用して) 配置される 2 番目のオーバーレイ キャンバスを作成することだと思います。

マウスのドラッグ中、すべての mousemoveイベントで clearRect() を使用してオーバーレイ キャンバスをクリアし、進行中のストローク全体を描画します。

を取得したらmouseup、オーバーレイをクリアし、ストローク全体をプライマリ キャンバスに描画します。

ライブの例を次に示します。

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

于 2011-07-09T16:46:31.650 に答える