html5 canvas使用图像作为掩码

Question

是否可以使用带有形状的图像作为整个画布的掩模或画布中的图像？

我想将图像放在带有遮罩的画布上,然后将其保存为新图像.

Answer 1

您可以使用"source-in"globalCompositeOperation将黑白图像用作蒙版.首先将画面图像绘制到画布上,然后将globalCompositeOperation更改为"source-in",最后绘制最终图像.

您的最终图像将仅在覆盖蒙版的位置绘制.

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

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

有关全球复合运营的更多信息