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

:

「ソースアウト」

chrome

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