blendMode()

キャンバスに色を追加する際の混合方法を設定します。

デフォルトでは、単色で描画すると、キャンバス上の現在のピクセル値の上に 塗り重ねられます。blendMode()は色を混合するための多くのオプションを提供します。

形状、画像、テキストをキャンバスに描画するためのソースとして使用できます。 ソースピクセルは、描画される場所のキャンバスピクセルの色を変更します。 最終的な色は、ソースピクセルの色とキャンバスピクセルの色を ブレンドした結果です。ソースとキャンバスのピクセルのRGB色値が 比較され、加算、減算、乗算、除算されて異なる効果を 生み出します。赤の値と赤の値、緑と緑、青と青が それぞれ処理されます。

パラメータmodeはブレンドモードを設定します。例えば、 blendMode(ADD)を呼び出すとブレンドモードをADDに設定します。 以下のブレンドモードは2DモードとWebGLモードの両方で利用可能です：

• BLEND: ソースの色値がキャンバスの値を上書きします。これがデフォルトモードです。
• ADD: ソースの色値がキャンバスの値に加算されます。
• DARKEST: 最も暗い色値を保持します。
• LIGHTEST: 最も明るい色値を保持します。
• EXCLUSION: DIFFERENCEに似ていますが、コントラストが低くなります。
• MULTIPLY: ソースの色値がキャンバスの値と乗算されます。結果は常に暗くなります。
• SCREEN: すべての色値が反転され、乗算され、再び反転されます。結果は常に明るくなります。（MULTIPLYの反対）
• REPLACE: 最後に描画されたソースがキャンバスの残りの部分を完全に置き換えます。
• REMOVE: 重なり合うピクセルが完全に透明になることで削除されます。

以下のブレンドモードは2Dモードでのみ利用可能です：

• DIFFERENCE: ソースの色値がキャンバスの値から減算されます。差が負の数になる場合は正の数に変換されます。
• OVERLAY: MULTIPLYとSCREENを組み合わせます。キャンバスの暗い値はより暗くなり、明るい値はより明るくなります。
• HARD_LIGHT: MULTIPLYとSCREENを組み合わせます。ソースの暗い値はより暗くなり、明るい値はより明るくなります。
• SOFT_LIGHT: HARD_LIGHTのよりソフトなバージョンです。
• DODGE: 明るい色調を明るくし、コントラストを増加させます。キャンバスの色値をソースの反転した色値で除算します。
• BURN: 暗い色調を暗くし、コントラストを増加させます。ソースの色値をキャンバスの反転した色値で除算し、結果を反転します。

以下のブレンドモードはWebGLモードでのみ利用可能です：

• SUBTRACT: ソースのRGB値がキャンバスの値から減算されます。差が負の数になる場合は正の数に変換されます。ソースとキャンバスのアルファ（透明度）値は加算されます。