Kineticjs 通过蒙版图像剪辑形状答案

【问题标题】：Kineticjs clip shape by mask imageKineticjs 通过蒙版图像剪辑形状
【发布时间】：2015-02-20 13:00:32
【问题描述】：

我有这样的蒙版图片

如何像在 Photoshop 中一样通过此蒙版隐藏绘制的元素（黑暗区域不可见，透明区域显示）。

可以通过设置 globalCompositeOperation = 'destination-over' 在原始画布中执行此操作，但我希望在 Kineticjs 中使用它

【问题讨论】：

【解决方案1】：

你可以这样做：

var shape = new Kinetic.Shape({
  drawFunc: function(context) {
    context.beginPath();
    context.rect(0, 0, image.width, image.height)
    context.closePath();
    context.fillStrokeShape(this);

     context.setAttr('globalCompositeOperation', 'destination-out');
     context.drawImage(image, 0, 0);
      context.setAttr('globalCompositeOperation', 'source-over');        
  },
  fill: '#00D2FF',
});

演示：http://jsbin.com/nebuvi/1/edit?html,js,output

【讨论】：

【解决方案2】：

据我所知，您可以尝试使用 opacity: 0. 作为您的图像值。或创建一个矩形覆盖图像上的矩形。

【讨论】：