JavaScript Canvas - 改变图像的不透明度

Question

我正在尝试在 Canvas 中创建平台游戏。我有主 Angular 和一些敌人。当玩家接触到敌人时，他会损失一些生命值，并在大约 3 秒内无法接触。现在我有一个问题。失去 HP 后，我想将 Angular 色图像的不透明度设置为 0.5(以显示不可触摸的东西)。

var mainchar = new Image();
    mainchar.src = 'mainch.png';

我不想使用 ctx.globalCompositeOperation = "lighter" 或 ctx.globalAlpha = 0.5 因为它们都会改变所有元素的不透明度(它是全局的).有什么办法可以改变图像的不透明度吗？例如 'mainchar.changeopacity' ?

Answer 1

您必须更改 globalAlpha 或将图像绘制到设置了 globalAlpha 的离屏 Canvas ，然后将此 Canvas 绘制到主 Canvas 上。

只需设置 alpha，绘制图像并将 alpha 重置回完全不透明。设置 alpha 不会更改已绘制到 Canvas 上的内容 - 它仅适用于下一个绘制的内容(在本例中为图像)。

当然，对于 PNG 图像，您始终可以使用 alpha channel 准备图像。

/// only image will have alpha affected:
context.globalAlpha = 0.5;
context.drawImage(image, x, y);
context.globalAlpha = 1.0;