HTML5畫布顏色

Question

我在HTML5畫布中有兩個塊。

1. 藍塊即固定在畫布
2. 黃色塊可以與鼠標拖動。

當有人將黃色塊移到藍色塊上時，我想將重疊或交叉區域的顏色更改爲綠色。 （請參見附件圖像具有清晰的思路）

由於藍+黃=綠色，有沒有辦法通過改變塊的不透明度來實現這個還是我必須尋找重疊兩個街區的面積，並在該地區顯示綠色街區或有任何其他方式？

我想知道實現這個目標的最佳方法是什麼？

Answer 1

看一看canvas globalCompositeOperation。 打火機複合型似乎適合你以後的。

Answer 2

你可以使用3個要素：

• 黃底：不透明度1
• 黃頂：不透明度0.X，相同的尺寸下一個
• 藍色：黃色的div
之間完全不透明

Example on jsFiddle

這還遠遠沒有完成，但也許是步正確的方向。

編輯：我注意到太晚了，你要求它在畫布上，但原則應該是一樣的。