使用KineticJS的面具画布

时间:2013-11-04 08:52:20

标签: javascript html5 canvas kineticjs

在我对KineticJS的使用中,我遇到了问题。

我想绘制三种形状:三角形,圆形和特定形状。

所以没有问题,但是我希望叠加层使我的三个形状成为下图。

Demo

  • 蓝色圆圈以特定的黑色形状固定

  • 覆盖蓝色圆圈的三角形部分必须具有某种颜色(示例中为灰色),而不接触蓝色圆圈的部分则采用不同的颜色(示例中为粉红色)

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

我会用剪辑来做这件事。

enter image description here

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/