JavaScript Kanat - görüntünün opaklığını değiştirin

Question

Tuval'te bir platform oyunu oynamaya çalışıyorum. Ana karakterim ve bazı düşmanlarım var. Oyuncu düşmana dokunduğunda, biraz HP kaybedecek ve yaklaşık 3s için dokunulmaz olacak. Şimdi bir problemim var. HP'yi kaybettikten sonra karakter görüntüsünün opaklığını 0,5'e (dokunulmaz şeyleri göstermek için) ayarlamak istiyorum.

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

tüm unsurların (küresel var) saydamlığını değiştirmek her ikisi nedeniyle bu derste ctx.globalCompositeOperation = "lighter" veya ctx.globalAlpha = 0.5 kullanmak istemiyoruz. Görüntü opaklığını değiştirmenin bir yolu var mı? Örneğin 'mainchar.changeopacity'?

Answer 1

Sen globalAlpha değiştirebilir veya globalAlpha kümesine sahiptir off-screen tuvale resim çizmek, daha sonra ana tuval üzerine bu tuval çizmek ya sahiptir.

Sadece alpha'yu ayarlayın, görüntüyü çizin ve alfaları tam opaklığa geri sıfırlayın. Alfa ayarı, tuvale önceden çizilen içeriği değiştirmez - yalnızca, bu resimde görünen sonraki öğesine uygulanır.

Ve tabii ki, PNG görüntüleri olması durumunda görüntüsünüzü daima alfa kanalı ile hazırlayabilirsiniz.

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

Answer 2

kullanımı kaydetmek ve geri yükleme:

Sen, küresel içeriği değiştirmek görüntü çizmek zorunda

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