Question

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

剪裁到的示例形状： porcelain

所以我用图像指定它，我知道如何从中获取图像数据。 我想要实现的是剪掉那个数字之外的所有东西。

我是这样想的：

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