html5基本ペイントツール

Question

私はhtml5を新しくしました。そして、私は基本的なペイントツールを作成しようとしています。

私がこのツールでしたいことは、1つ以上の図形（重なっている可能性があります）を持ち、色を重ねずに図形を描くことです。円が四角形の内側に描画され、円の色付けを開始した場合、その内部でドラッグが開始されない限り、マウスがドラッグされても描画されません。

これを達成するには、複数のキャンバスまたはシェイプを使用する必要がありますか？

ありがとうございます。

Answer 1

まず、別々の図形を追跡するというアイデアをプログラムする必要があります。まだ行っていない場合はチュートリアルのhereを参照してください。

あなたの図形はすべてイメージとして、またはメモリ内のキャンバスとして保持されると想像します。私はあなたがそれをどうやってできるかわからない。

あなたがこれを行うことが万人の方法がありますが、ここでは1です：

あなたはあなたがにしているどの形状を検出する必要があなたの描画処理を開始すると。その後、その形状をメモリ内キャンバスに描画し、その一時キャンバスのグローバルコンポジット操作をsource-atopに切り替えます。これは、ペイントがその形状の既に不透明な領域にペイントすることができることを確実にします（それがここの意図であればそうです）。

すべてあなたがペイントしている間は、一時キャンバスを更新し、メインキャンバスを常に再描画したいと思うでしょう。メインキャンバスを再描画している間に、そのシェイプのイメージファイルをペイントするのではなく、テンポラリキャンバスをペイントする必要があります（キャンバスを使用してシェイプを保持する場合は、リアルタイムでそれらを更新できます）。

シェイプごとに一時的なキャンバスを使用していない場合は、描画オペレーションを停止すると、シェイプに関連付けられたイメージを更新して操作を完了する必要があります。あらゆる形状のインメモリキャンバスを（DOMに追加されません）（つまり、形状の大きさと大きくないです）を使用して

---

は、物事をコーディング少し楽になりますし、パフォーマンスに悪いことではないかもしれません。私は100と1000（またはそれ以上）のメモリ内のキャンバスをあなたのターゲットプラットフォーム上で試してみましょう。

代わりに1つのメモリキャンバスを使用し、すべてのシェイプを表すHTMLImageElement（png）を使用しますが、canvas.toImageURL関数を使用すると、それ自体でパフォーマンスが低下する可能性があります。あなたの場合にどちらが最善のものかを見るために両方の方法を試してみます。形状の数が十分に小さい場合は、おそらくどちらの場合でも問題ありません。