HTML5 Canvas グラフィック構成はどのように実装されますか?付属コード

この記事の内容は、HTML5 Canvas グラフィックスの組み合わせがどのように実装されるかについてです。コードを添付しますので、困っている方は参考にしていただければ幸いです。

キャンバスで複雑なグラフィックを描画する場合、キャンバスではグラフィックが交差することを組み合わせと呼びます。

コンテキスト オブジェクトの globalCompositeOperation 属性を通じてグラフィックスの結合方法を設定します。この属性の値とその意味を表 4-5 に示します。このうち、ソースは新しく描画されたグラフィックを指し、デスティネーションは元のグラフィックを指します。デフォルト値はソースオーバーです。

#表 4‑5 globalCompositeOperation 属性の値と意味操作意味source-atop (S atop D)両方のイメージが不透明なソース イメージを表示します。宛先イメージが不透明でソース イメージが透明な宛先イメージを表示します。他の場所では透過的に表示されます。 source-in (S in D)ソース イメージを表示します。ソース イメージとデスティネーション イメージの両方が透明になります。他の場所では透過的に表示されます。 source-out (S out D)ソース イメージが非透明で、デスティネーション イメージが透明である場合に、ソース イメージを表示します。他の場所では透過的に表示されます。 source-over (S over D、デフォルト)ソース イメージが不透明な場所にソース イメージを表示します。ターゲット画像を別の場所に表示します。 destination-atop (S atop D)ソース イメージとデスティネーション イメージの両方が不透明なデスティネーション イメージを表示します。ソース イメージが不透明で、デスティネーション イメージが透明である場合に、ソース イメージを表示します。他の場所では透過的に表示されます。 destination-in (S in D)ソース イメージとデスティネーション イメージの両方が不透明なデスティネーション イメージを表示します。他の場所では透過的に表示されます。 destination -out (S out D) デスティネーション イメージが不透明でソース イメージが透明な場合に、デスティネーション イメージを表示します。他の場所では透過的に表示されます。 destination -over (S over D)ターゲット画像が不透明な場所にターゲット画像を表示します。ターゲット画像を別の場所に表示します。 lighter (S plus D)ソース画像と宛先画像の合計を表示します。 xor (S xor D)ソース画像とターゲット画像が XOR 演算されます。 copy (D は無視されます)ターゲット イメージではなく、ソース イメージを表示します。

次の図は、globalCompositeOperation 属性のさまざまな値におけるソース グラフィックとターゲット グラフィックの効果を示しています。このうち、赤い丸がソースグラフィック(S)、青い四角がターゲットグラフィック(D)を表します。

上の図は、Google Chrome ブラウザ バージョン 41.0.2272.118 での効果です。ただし、Chrome、Firefox、Safari、Opera、IE9 などの 5 つの主要なブラウザでは組み合わせの処理方法が異なるため、組み合わせ操作の処理は依然として非常に困難です。グラフィックス合成を使用したい場合は、各ブラウザの現在のサポートを確認する必要があります。

globalCompositeOperation プロパティはグローバルであるため、使用するときは状態の保存と復元に注意する必要があります。

上記は、HTML5 Canvas グラフィックの組み合わせを実装する方法です。コードの完全な紹介が添付されています。Html5 ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がHTML5 Canvas グラフィック構成はどのように実装されますか?付属コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。