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