在KineticJS中使用口罩畫布

Question

在使用KineticJS時，我遇到了問題。

我想繪制三種形狀：三角形，圓形和特定形狀。

因此沒有問題，但是我想讓覆蓋層使我的三個形狀如下圖所示。

• 藍色圓圈固定在特定的黑色形狀中

• 覆蓋藍色圓圈的三角形部分必須具有某種顏色（在示例中為灰色），而與藍色圓圈不接觸的部分必須具有不同的顏色（在示例中為粉紅色）

謝謝你的幫助

Answer 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/