javascript - Kineticjs 通过蒙版图像剪辑形状

Question

我有这样的蒙版图像

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

可以通过设置 globalCompositeOperation = 'destination-over' 在原始 Canvas 中执行此操作，但我希望在 Kineticjs 中实现

Answer 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