HTML5画布颜色

Question

我在HTML5画布中有两个块。

1. 蓝块即固定在画布
2. 黄色块可以与鼠标拖动。

当有人将黄色块移到蓝色块上时，我想将重叠或交叉区域的颜色更改为绿色。 （请参见附件图像具有清晰的思路）

由于蓝+黄=绿色，有没有办法通过改变块的不透明度来实现这个还是我必须寻找重叠两个街区的面积，并在该地区显示绿色街区或有任何其他方式？

我想知道实现这个目标的最佳方法是什么？

Answer 1

看一看canvas globalCompositeOperation。 打火机复合型似乎适合你以后的。

Answer 2

你可以使用3个要素：

• 黄底：不透明度1
• 黄顶：不透明度0.X，相同的尺寸下一个
• 蓝色：黄色的div
之间完全不透明

Example on jsFiddle

这还远远没有完成，但也许是步正确的方向。

编辑：我注意到太晚了，你要求它在画布上，但原则应该是一样的。