Html5 Canvas 事前学習ノート (7) - 合成

この記事では、グローバル アルファ値と合成操作である他の 2 つの描画状態値を紹介します。まず、グローバル アルファ値を見てみましょう

グローバル アルファ値は非常に単純で、私たちの中の「」です。 argb value a" 値との違いは、グローバル アルファ値が 0.0 (完全に透明) から 1.0 (完全に透明) の間にある必要があることです。これは、前述の "" に対応します。 a" 0から255までの値、デフォルト値は1.0です。

次のコードは次の効果を実現します:

context.fillStyle = "red";
context.save();
context.globalAlpha = 0.5;
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);

この例では、グローバル アルファ値の使用方法を紹介し、それが描画状態値であることも示しています。 save も使用できることを示します。 とrestoreは、saveの呼び出し時にfillStyleのredの値が保持されるため、半透明の赤い四角と不透明な赤い四角が描画されます。

合成操作は状態値globalCompositeOperationでもあり、その異なる値を定義すると、主にソースグラフィックス(globalCompositeOperationを定義する前の描画コンテキスト)とターゲットグラフィックス(を定義する)が完了します。 globalCompositeoperationの後の描画コンテキスト）このコードを最初に見てください。これは、次の効果を達成します。これは、globalcompositeoperationのデフォルト値です

、つまりありません。この文の効果も同様です。つまり、後で描画された部分が前に描画された部分をカバーします

以下は、globalCompositeOperation

の値に対応する効果を紹介します:

"destination-over"

:

「ソースアウト」

「デスティネーション・アトップ」

「ライター」

「copy」

「xor」

一部の値は現在

chrome

ブラウザでサポートされていないため、仕様が規定されるまで待つ必要があります

上記は Html5 Canvas の予備学習ノート (7) - 合成コンテンツです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。