Canvas 如何使用KineticJS创建圆形剪辑？

我想使用循环路径剪裁一个组，但是该组的clipFunc似乎没有执行，关于如何使用clipFunc属性的文档有点零散

用我目前的努力

以下是相关代码：

var stage = new Kinetic.Stage({
  container: 'container',
  width: 500,
  height: 500
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
   clipFunc: function(canvas) {
      var context = canvas.getContext();
      context.beginPath();
      context.arc(250, 250, 50, 0, 2 * Math.PI, false);
      context.clip();
   }
});

var rect = new Kinetic.Rect({
   x: 150,
   y: 225,
   width: 200,
   height: 200,
   fill: 'blue',
   stroke: 'black',
   strokeWidth: 2
});

group.add(rect);
layer.add(group);
stage.add(layer);

---

目前，如果我在clipFunc函数中放置断点，它将永远不会被命中。

对clipFunc的支持被放弃，取而代之的是clip，它只是一个矩形剪裁区域。如果要模拟圆形剪辑，可以使用toImage（）将组转换为图像，然后使用图像填充图案绘制一个圆

---

clipFunc属性被删除，因为画布剪辑功能不能很好地处理非矩形剪辑区域，因为边是非抗锯齿的（这对于圆形路径尤其明显）

Ah，这是有意义的。这也解释了为什么clipFunc上的文档如此杂乱无章。