将遮罩画布与 KineticJS 一起使用答案

【问题标题】：Use masks canvas with KineticJS将遮罩画布与 KineticJS 一起使用
【发布时间】：2013-11-14 20:50:21
【问题描述】：

在我使用 KineticJS 时遇到问题。

我想画三种形状：三角形、圆形和特定形状。

所以没有问题，但是我希望叠加层使我的三个形状如下图所示。

蓝色圆圈固定在特定的黑色形状中
覆盖蓝色圆圈的三角形部分必须具有某种颜色（示例中为灰色），不接触蓝色圆圈的部分必须具有不同颜色（示例中为粉红色）

感谢您的帮助

【问题讨论】：

标签： javascript html canvas kineticjs

【解决方案1】：

我会通过剪辑来做到这一点。

1. draw the cloud in black. 
2. clip with cloud.
3. draw circle in blue.
4. draw triangle in pink.
5. clip with circle. 
6. draw  triangle in grey.
7. and  restore context.

小提琴在这里：

http://jsfiddle.net/gamealchemist/T8k7m/

【讨论】：