JavaScript画布-更改图像的不透明度

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

---

我不想使用

ctx.globalCompositeOperation=“lighter”

或

ctx.globalAlpha=0.5

，因为它们都会更改所有元素的不透明度（它是全局的）。有没有办法改变图像的不透明度？例如“mainchar.changeopacity”？

您必须更改

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;

---

您还可以使用“保存和还原”

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

---

您必须更改全局上下文，绘制图像，然后将其更改回其他所有内容。您需要将所有

画布。*

更改为

上下文。*

。

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