JavaScript畫布 - 更改圖像的不透明度

Question

我正試圖在畫布中創建一個平臺遊戲。我有主角和一些敵人。當玩家觸及敵人時，他將失去一些HP，並且他將在3秒內不可觸及。現在我有一個問題。在釋放HP之後，我想將字符圖像的不透明度設置爲0.5（以顯示不可觸摸的事物）。

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

我不想使用ctx.globalCompositeOperation = "lighter"或ctx.globalAlpha = 0.5 becouse兩者改變所有元素（這是全球）的不透明度。有沒有辦法改變圖像的不透明度？例如'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

使用保存和恢復：

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