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

Question

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

3

我需要绘制一张透明度乘以颜色的图片。我找到的唯一方法是像这样在离屏画布中准备一个乘以颜色的图片：

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

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

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

- GLaz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Answer 1

如果您想要在没有任何背景的情况下放大半透明图像，那么这就是正确的方法。

如果“必要画布”上直接放置图像的背景是透明的，则可以在原地进行放大。

几点注意事项：

globalCompositeOperation="multiply" 在Internet Explorer中不可用
globalCompositeOperation="copy" 似乎是不必要的。