キャンバス合成効果とは何ですか?

キャンバス合成エフェクトには、ソース オーバー、ソース イン、ソース アウト、ソース アトップ、デスティネーション オーバー、デスティネーション イン、デスティネーション アウト、デスティネーション アトップ、ライター、コピーなどが含まれます。詳細な紹介: 1. ソース オーバー、デフォルトの合成モード、新しく描画されたイメージが既存のイメージにオーバーレイされます; 2. ソース インなど。 ##このチュートリアルの動作環境: Windows システム、Dell G3 コンピューター。

Canvas は HTML5 の描画 API で、グラフィック描画、画像処理、合成効果などの豊富な描画機能を提供します。 Canvas では、合成効果とは、画像を描画するときに異なる合成モードを通じて複数の画像を重ね合わせ、それによって異なる視覚効果を生み出すことを指します。以下に、一般的な Canvas 合成エフェクトをいくつか紹介します。

1.source-over: これはデフォルトの合成モードで、新しく描画されたイメージが既存のイメージの上にオーバーレイされます。

2.source-in: 新しく描いた画像と既存の画像の重なった部分だけを残し、それ以外の部分は透明にします。

3. ソースアウト: 新しく描画した画像のうち、既存の画像と重ならない部分のみを保持し、それ以外の部分は透明にします。

4. source-atop: 既存の画像の上に新たに描画した画像を重ねますが、既存の画像と重なった部分のみが残り、それ以外の部分は透明になります。

5. destination-over: 新しく描画されたイメージは既存のイメージの下に配置されます。

6. destination-in: 既存の画像のうち、新規に描画した画像と重なった部分のみを保持し、それ以外の部分は透明にします。

7. destination-out: 既存の画像のうち、新たに描画した画像と重ならない部分のみを残し、それ以外の部分は透明にします。

8. destination-atop: 新規描画画像の下に既存画像が配置されますが、新規描画画像と重なった部分のみが残り、その他の部分は透明になります。

9. 明るい色: 新しく描画した画像と既存の画像の色を加算して明るい色を生成します。

10. コピー: 新しく描画されたイメージは、既存のイメージを完全に置き換えます。

11. xor: 新しく描画された画像の色と既存の画像の XOR 演算が行われ、特殊効果が生成されます。

上記の合成モードに加えて、Canvas は、globalCompositeOperation プロパティを通じて設定できるいくつかのグローバル合成操作も提供します。一般的なグローバル合成操作は次のとおりです:

1. 乗算: 新しく描画されたイメージに既存のイメージの色を乗算して、より暗い色を生成します。

2. スクリーン: 新しく描画された画像は、既存の画像の色とスクリーンで混合され、より明るい色が生成されます。

3. オーバーレイ: 既存の画像の明るさとコントラストに応じて、新しく描画される画像の色を調整します。

4. 暗くする: 新しく描画したイメージの色と既存のイメージの色を比較し、暗い方の色を保持します。

5.明るくする: 新しく描画した画像の色と既存の画像の色を比較し、明るい方の色を保持します。

これらの合成効果を使用すると、画像のブレンド、透明効果、影の効果など、さまざまな興味深い視覚効果を Canvas で実現できます。実際のアプリケーションでは、必要な効果を達成するために、必要に応じて適切な合成モードを選択できます。同時に、複数の画像や合成効果を組み合わせて、より複雑でユニークなグラフィック効果を作成することもできます。

以上がキャンバス合成効果とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。