4

HTML5 キャンバスに 2 つのブロックがあります。

  1. 青いブロック、つまりキャンバスに固定
  2. マウスでドラッグできる黄色のブロック。

誰かが青いブロックの上に黄色のブロックを移動すると、重複または交差領域の色を緑に変更したいと思います。(明確なアイデアを得るために添付の画像を参照してください)

ここに画像の説明を入力

blue + yellow = greenであるため、ブロックの不透明度を変更することでこれを達成する方法はありますか、または 2 つのブロックの重複領域を検索してその領域に緑色のブロックを表示する必要がありますか、または他の方法はありますか?

これを達成するための最良のアプローチは何ですか?

4

2 に答える 2

0

3 つの要素を使用できます。

  • 黄色の下: 不透明度 1
  • 黄色の上: 不透明度 0.x、下のものと同じ寸法
  • 青: 黄色の div 間の完全な不透明度

jsFiddle の例

これはまだ完了していませんが、おそらく正しい方向への一歩です。

編集: キャンバス上でリクエストされたことに気付くのが遅すぎましたが、原則は同じである必要があります。

于 2012-06-16T19:35:06.067 に答える