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

Question

我正在尝试在Canvas中创建一个平台游戏。我有主角和一些敌人。当玩家触摸敌人时，他将失去一些HP，并且他将在3s左右不可接触。现在我有一个问题。松开HP之后，我想将角色图像的不透明度设置为0.5（以显示不可触摸的东西）。

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

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

Answer 1

您必须更改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;

Answer 2

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

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