私はCanvasでプラットフォームゲームを作成しようとしています。私は主人公といくつかの敵を持っています。プレイヤーが敵に触れると、彼はHPを失い、約3秒間手を触れることはありません。今私は1つの問題があります。 HPを失った後、私はキャラクターイメージの不透明度を0.5に設定したいと思います。JavaScriptキャンバス - 画像の不透明度を変更する
var mainchar = new Image();
mainchar.src = 'mainch.png';
私はすべての要素（それはグローバルだ）の不透明度を変更するそれらの両方becouse ctx.globalCompositeOperation = "lighter"またはctx.globalAlpha = 0.5を使用したくありません。画像の不透明度を変更する方法はありますか？例えば 'mainchar.changeopacity'？
globalAlphaを変更するか、globalAlphaが設定されたオフスクリーンキャンバスに画像を描画し、このキャンバスをメインキャンバスに描画する必要があります。
アルファを設定するだけで画像を描画し、アルファを完全な不透明度に戻します。アルファを設定しても、キャンバスに既に描画されているコンテンツは変更されません。次ののもののみに適用されます（この場合は画像になります）。
もちろん、PNG画像の場合は常にアルファチャンネルで画像を準備することができます。
/// only image will have alpha affected:
context.globalAlpha = 0.5;
context.drawImage(image, x, y);
context.globalAlpha = 1.0;
は使用保存と復元：
canvas.save();
canvas.globalAlpha = 0.5;
....
canvas.restore(); //this will restore canvas state
あなたが他のすべてのためにそれをバックに変更、その後、画像を描画し、グローバルコンテキストを変更する必要があります。 – mash