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

Question

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

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

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

score 22 · Accepted Answer

您必须更改globalAlpha或将图像绘制到已设置的屏幕外画布上globalAlpha，然后将此画布绘制到主画布上。

只需设置 alpha，绘制图像并将 alpha 重置为完全不透明度。设置 alpha 不会改变已经绘制到画布上的内容——它只适用于下一个绘制的东西（在这种情况下是图像）。

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

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

score 9 · Accepted Answer

您还可以使用保存和恢复。

context.save();
context.globalAlpha = 0.5;
.... 
context.restore();  //this will restore canvas state

2 回答 2