使用HTML5 Canvas绘制透明度乘以颜色的图像

Question

我需要绘制一个透明度乘以颜色的图像。 我发现的唯一方法是在离屏画布中准备一个乘以颜色的图像，如下所示：

ctx.globalCompositeOperation = "copy"; // copy pixel-to-pixel source image
ctx.drawImage(image, ...);
ctx.globalCompositeOperation = "multiply"; // multiply it by red color
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(...);
ctx.globalCompositeOperation = "destination-atop"; // restore transparency
ctx.drawImage(image, ...);

然后将其绘制到必要的画布上。

是否有更好（更快）的方法来做同样的事情？

Answer 1

如果你想在没有任何背景的情况下乘以半透明图像，那就是这样做的方法。

如果图像正下方的“必要画布”上的背景是透明的，您可以将其相乘。

几点说明：

• globalCompositeOperation="multiply"在Internet Explorer中不可用

• globalCompositeOperation="copy"似乎没必要。