javascript - 如何使用drawImage/putImageData进行剪辑

Question

我正在编写一个应用程序，需要对 Canvas 上的图像进行静态剪切(当您在 Canvas 上移动图像时，剪切区域保留在一个位置)。我有三种情况:多边形、椭圆形、用图像指定的任何形状。我能够处理多边形和椭圆，因为我可以使用路径和弧来处理它们，但是当涉及到通过图像指定的蒙版时，我不知道该怎么做。

要剪辑到的示例形状: 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

我通过创建一个与蒙版图像大小相同的新 Canvas 来做到这一点。然后在 Canvas 上绘制图像，然后设置 ctx.globalCompositeOperation至"destination-in"在图像上绘制 mask ( mask 它)，然后使用 ctx.drawImage 将该 Canvas 绘制到屏幕 Canvas 上

由于这绝对是一个重复的问题，我不会以代码形式给出答案，它在 stackoverflow 上已经被搞死了。

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