JavaScript Canvas - ändern Sie die Deckkraft des Bildes

Question

Ich versuche, ein Plattformspiel in Canvas zu erstellen. Ich habe Hauptcharakter und einige Feinde. Wenn der Spieler den Feind berührt, verliert er etwas HP und er wird ungefähr 3s lang unantastbar sein. Jetzt habe ich ein Problem. Nachdem ich HP verloren habe, möchte ich die Deckkraft des Charakterbildes auf 0,5 setzen (um diese unantastbare Sache zu zeigen).

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

Ich will nicht ctx.globalCompositeOperation = "lighter" oder ctx.globalAlpha = 0.5 becouse beide verwenden, um die Opazität aller Elemente ändern (es ist global). Gibt es eine Möglichkeit, die Bildtrübung zu ändern? Zum Beispiel "marchar.changeopacity"?

Answer 1

Sie müssen entweder globalAlpha ändern oder das Bild auf eine Offscreen-Leinwand zeichnen, auf der globalAlpha festgelegt ist. Zeichnen Sie dann diese Leinwand auf die Hauptansicht.

Setzen Sie einfach Alpha, zeichnen Sie das Bild und setzen Sie Alpha zurück auf volle Deckkraft. Einstellung Alpha ändert nicht den Inhalt, der bereits auf die Leinwand gezeichnet wird - es gilt nur für die nächste Sache gezeichnet (was wäre das Bild in diesem Fall).

Und natürlich können Sie Ihr Bild immer mit einem Alpha-Kanal im Falle von PNG-Bildern vorbereiten.

/// only image will have alpha affected: 
context.globalAlpha = 0.5; 
context.drawImage(image, x, y); 
context.globalAlpha = 1.0; 

Answer 2

Verwendung speichern und wiederherstellen:

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