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

Question

我需要绘制一个透明度乘以颜色的图像。 我发现的唯一方法是像这样在离屏 Canvas 中准备一个乘以颜色的图像:

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, ...);

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

有没有更好(更快)的方法来做同样的事情？

Answer 1

如果你想在没有任何背景的情况下叠加半透明图像，就可以这样做。

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

一些注意事项:

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

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