javascript - 如何使用drawImage/putImageData来剪辑

Question

我正在编写一个应用程序，需要对画布上的图像进行静态剪裁（当您将剪贴画区域中的图像移动到一个位置时）。我有三种情况：多边形，椭圆，图像指定的任何形状。我能够应付多边形和椭圆，因为我可以用路径和弧来完成它们，但是当涉及到通过图像指定的遮罩时，我不知道该怎么做。

实施例形状夹到： Let's say I am not able to draw it using paths

所以，我有它与图​​像指定，我知道如何从它获得的图像数据。 我试图达到的目标是将所有超出这个数字的东西剪掉。

我试图像这样：

canvas.clipTo = function (ctx) { 
    ctx.drawImage(shape.src, left, top); 
}; 

而像这样：

当然

canvas.clipTo = function (ctx) { 
    ctx.putImageData(imgData, left, top); 
}; 

没有他们的工作，我希望，它只是绘制一条黑色的形状，而不是裁剪到的地区。

任何想法如何做到这一点？

Answer 1

我这样做是通过创建一个与遮罩图像大小相同的新画布。然后绘制形象，画布上，然后将ctx.globalCompositeOperation到"destination-in"在图像（屏蔽吧）绘制面具，然后绘制该画布屏幕上的画布ctx.drawImage

因为这是最绝对是一个重复的问题我不会以代码的形式给出答案，它已经在stackoverflow上完成了。

哦，我忘了。使用imageData进行剪辑是一种非常低效的方法。