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

【问题标题】：JavaScript Canvas - change the opacity of imageJavaScript Canvas - 改变图像的不透明度
【发布时间】：2018-04-18 17:28:57
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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;

【讨论】：

【解决方案2】：

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

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

【讨论】：