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 进行剪辑是一种非常低效的方法。