1

HTML5 と Javascript を使用して塗り絵アプリを作成しようとしています。動的な png 画像を Canvas にロードし、その下にストロークを描画しようとしています。しかし、それは機能していないようです...

レイヤード キャンバスも使用してみましたが、うまくいかないようです。画像の下にストロークを重ねる方法はありますか?

4

1 に答える 1

1

PNG 画像に透明な領域 (ユーザー ストロークが描画されるはずの領域) がある場合は、次のことを試すことができます。

  1. まずキャンバスに全体を描きます。
  2. ユーザーのストロークを通常どおりに処理します (mousedown、mousemove などを検出します) が、「変更された領域」 (つまり、最初のクリックと最後のクリックの間の四角形) を追跡します。
  3. すべてのストロークが終了したら、変更されたキャンバスの領域 (前の長方形) を再度描画して、ユーザーのストロークが png 画像の透明な領域をスローして表示されるようにします。

このようにして、ユーザーは描画できますが、ユーザーのストローク (塗りつぶしの色) の上に元の png 画像 (鉛筆画など) を維持します。

編集: より良いアイデアは、2 つのキャンバス/レイヤーを使用することです。最初のもの (上記) には、元の png 画像 (透明な領域を含む) があります。ユーザーがそこをクリックすると、2 番目のキャンバス (下) にストロークを描画できるため、すべてのストロークで再描画する追加作業を行わなくても、png が常に表示されます。また、「消去」ツールの実装も容易になります。

もちろん、ディスクに保存して印刷物をダウンロードする前に、両方のキャンバスをマージする必要があります。

于 2012-12-01T17:03:02.057 に答える