Płótno JavaScript - zmień krycie obrazu

Question

Próbuję stworzyć grę platformową w Canvas. Mam główną postać i kilku wrogów. Kiedy gracz dotknie wroga, straci trochę PW i będzie nietykalny przez około 3s. Teraz mam jeden problem. Po utracie HP chcę ustawić przezroczystość obrazu postaci na 0.5 (aby pokazać to nietykalne).

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

Nie chcę używać ctx.globalCompositeOperation = "lighter" lub ctx.globalAlpha = 0.5 poniewaz oboje zmienić krycie wszystkich elementów (to globalna). Czy istnieje sposób na zmianę krycia obrazu? Na przykład "mainchar.changeopacity"?

Answer 1

Musisz zmienić globalAlpha lub narysować obraz na płótnie poza ekranem, który ma ustawiony globalAlpha, a następnie narysuj to płótno na głównym płótnie.

Po prostu ustaw alfa, narysuj obraz i zresetuj alfa z powrotem do pełnego krycia. Ustawienie alfa nie zmienia zawartości, która jest już narysowana na płótnie - dotyczy tylko rysowanej rzeczy (która byłaby w tym przypadku obrazem).

Oczywiście zawsze można przygotować obraz z kanałem alfa w przypadku obrazów PNG.

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

Answer 2

użycie zapisać i przywrócić:

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