Canvas globalCompositeOperation

デフォルトでは、オブジェクト (ソース) が Canvas 内の別のオブジェクト (ターゲット) の上に描画される場合、ブラウザはソース オブジェクトのイメージをターゲット オブジェクトのイメージの上に単純にオーバーレイします。

簡単に言うと、Canvas では、Canvas のglobalCompositeOperation操作を通じて画像ソースとターゲット画像を組み合わせることで、次の図のようなさまざまな効果を得ることができます。

上の図に示すように、赤いリンゴと黒い丸は、 globalCompositeOperationのdestination-outを通じて、かじられた赤いリンゴに変わります。つまり、Canvas で画像を合成することで、スクラッチ カードの宝くじのようなエフェクトを作成するなど、いくつかのユニークなエフェクトを実現できます。 今日は、Canvas で画像合成を使用する方法を学びます。

Canvas のglobalCompositeOperation属性には合計26種類の値があり、それぞれの種類によって異なる効果が得られ、一部の効果はブラウザで正常に表示されない場合があります。でもそんなことはどうでもいいので、この26種類の意味と効果を簡単に理解してみましょう。

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.beginPath(); 2、true); ctx.closePath();

上記のコードは、Canvas キャンバス上に半径80pxの赤い円を描画します。これをここでは画像ソースと呼びます。

 ctx.fillStyle = 'オレンジ'; ctx.arc(40, 20, 80, 0, ctx.closePath(); ();

このコードは、Canvas キャンバス上に半径80pxのオレンジ色の円を描画します。これをここではイメージ ターゲットと呼びます。画像ソースとターゲット画像の間にglobalCompositeOperationの値を設定することで、画像合成操作を完了できます。

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.beginPath(); 2、true); ctx.fill(); 'ソースイン'; ctx.fillStyle = 'オレンジ'; ctx.arc(40, 20, 80, 0, ctx.closePath(); (); ctx.restore();

このとき得られる効果は以下の通りです。

source-over globalCompositeOperationプロパティのデフォルト値です。ソース グラフィックはターゲット グラフィックを覆い、ソース グラフィックの不透明な部分にはソース グラフィックが表示され、残りの部分にはターゲット グラフィックが表示されます。

source-in : ターゲットグラフィックとソースグラフィックの重なって不透明な部分のみが描画されます。

source-out : ターゲットグラフィックとソースグラフィックの重ならない部分が描画されます。

source-atop : 対象グラフィックスとソースグラフィックスの内容の重複部分にある対象グラフィックスを描画します。

destination-over : デスティネーション グラフィックスとソース グラフィックス コンテンツの背後にあるデスティネーション グラフィックスが描画されます。

destination-in : 宛先グラフィックとソースグラフィックの重なった部分を保持し(ソースグラフィック)、残りを透過表示します。

他のものは逐一表示されません。各値に対応する具体的な説明はここにあります。

Canvas には、画像合成操作を制御する 2 つのプロパティglobalAlphaとglobalCompositeOperationがあります。

• globalAlpha : 画像の透明度を設定します。 globalAlphaプロパティのデフォルトは1で、完全な不透明を示し、 0 (完全な透明) から1 (完全な不透明) まで設定できます。この値はグラフを描画する前に設定する必要があります
• globalCompositeOperation : この属性の値は、 globalAlphaとすべての変換が有効になった後の、現在の Canvas ビットマップでのグラフィックスの描画を制御します。

私たちの日常業務では、スクラッチカードなどの宝くじの演出をよく目にします。 Canvas を使用してこれを行う場合は、Canvas 画像の合成を使用します。

 <div id=card> <canvas id=canvasOne width=500 height=300></canvas> </div>

賞品 (画像の場合) をdiv#cardの背景として表示します。次に、最初に Canvas に灰色の四角形 (ソース イメージ) を描画し、次にマウス イベント (またはタッチ イベント) を通じて新しいイメージを動的に描画し (これはブラシに似ています)、 globalCompositeOperation属性の値をdestination-out (new) に設定します。描画 グラフィックスの重なり合わない部分と、ターゲット キャンバスに既に存在するグラフィックス コンテンツは保持されます)。ブラシの消去が一定の割合を超えた場合は、 <canvas>要素を削除するか、 clearRect()使用して Canvas キャンバスをクリアします。 div背景を表示するには

この記事では、Canvas の画像合成を主に紹介します。Canvas では、画像合成効果を実現するために、globalAlpha と globalCompositeOperation の 2 つの属性を通じて画像合成操作を制御できます。これが皆さんの学習に役立つことを願っています。また、皆さんが VeVb Wulin Network をサポートしてくれることを願っています。