9

Canvas でプラットフォーム ゲームを作成しようとしています。主人公と敵がいます。プレイヤーが敵に触れると、HP を失い、約 3 秒間触れられなくなります。今、私には1つの問題があります。HPを失った後、キャラクター画像の不透明度を0.5に設定したい（触れられないことを示すため）。 

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

私はそれらの両方を使用しctx.globalCompositeOperation = "lighter"たり、すべての要素の不透明度を変更したりしたくありません(グローバルです)。ctx.globalAlpha = 0.5画像の不透明度を変更する方法はありますか? たとえば、「mainchar.changeopacity」?

4

2 に答える 2

22

画像を変更するか、設定さglobalAlphaれているオフスクリーン キャンバスにglobalAlpha描画してから、このキャンバスをメイン キャンバスに描画する必要があります。

アルファを設定し、画像を描画し、アルファを完全な不透明度にリセットするだけです。alpha を設定しても、キャンバスに既に描画されているコンテンツは変更されません。次に描画されるもの (この場合は画像) にのみ適用されます。

もちろん、PNG 画像の場合はいつでもアルファ チャネルを使用して画像を準備できます。

/// only image will have alpha affected:
context.globalAlpha = 0.5;
context.drawImage(image, x, y);
context.globalAlpha = 1.0;
于 2013-09-22T21:54:35.403 に答える
9

保存と復元も使用できます。

context.save();
context.globalAlpha = 0.5;
.... 
context.restore();  //this will restore canvas state
于 2013-09-23T09:34:13.193 に答える