javascript - html5 Canvas 使用图像作为 mask

Question

是否可以使用具有形状的图像作为整个 Canvas 或 Canvas 内图像的 mask ？

我想将图像放在 Canvas 中，并在图像上加上 mask ，然后将其另存为新图像。

Answer 1

您可以使用“source-in”globalCompositeOperation 将黑白图像用作 mask 。首先，您将蒙版图像绘制到 Canvas 上，然后将 globalCompositeOperation 更改为“source-in”，最后绘制最终图像。

您的最终图像只会在它覆盖 mask 的地方绘制。

var ctx = document.getElementById('c').getContext('2d');

ctx.drawImage(YOUR_MASK, 0, 0);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(YOUR_IMAGE, 0 , 0); 

More info on global composite operations