HTML5 基本教程

HTML5 API

HTML5 メディア

HTML5 グラフィック

HTML5 Canvas 変換 HTML5 Canvasでイメージを描画

HTML5 Canvas 合成

HTML5キャンバスに形状を描画する際、描画した内容がキャンバス上の既存の内容とどのように合成されるかを設定できます。この記事では、描画内容をキャンバス上の既存の内容と混成する方法について説明します。

キャンバス合成

2Dコンテキストには、キャンバスの合成モードを制御する2つの属性があります。これらは:

globalAlpha
globalCompositeOperation

globalAlpha

globalAlpha属性は、描画した内容の透明度を決定します。/不透明度です。これは0から1の間です。0は、あなたが描画した内容が完全に透明であることを示します。値は0です。5これは、描画した内容が半透明であることを示します。値は1これは、あなたが描画した内容が完全に不透明であることを示します。初期値は1.
globalAlpha属性の設定は以下の通りです:

context.globalAlpha = 0.5;

globalCompositeOperation

globalCompositeOperation属性は、あなたが描画した内容がキャンバス上の既存の图形にどのように混成されるかを決定します。
globalCompositeOperation属性の設定は以下の通りです:

context.globalCompositeOperation = "copy";

globalCompositeOperationは「ソース」と「目的地」を参照し、ソースと目的地の混成方法を指定します。ソースはあなたが描画した内容であり、目的地はすでに描画された内容です。以下は、可能な値とその意味のリストです:


値	説明
`copy`	ソースとターゲットが重なっている場所では、ソースが表示されます。
`destination-atop`	ソースとターゲットが重なっていて、両方とも不透明な場合、ターゲットが表示されます。ターゲットが透明な場合、ソースが表示されます。
`destination-in`	ソースとターゲットが重なっていて、両方とも不透明な場合、ターゲットが表示されます。重なっていない場所では、ソースが表示されません。
`destination-out`	ソースとターゲットが重なっていない場所では、ターゲットが表示されます。他のどこでも透明性が表示されます。
`destination-over`	ソースとターゲットが重なっている場所では、ターゲットが表示されます。重なっていない場合、ソースが表示されます。
`source-atop`	ソースとターゲットが重なっている場所では、ソースが表示されます。重なっていない場所、またはソースが透明な場合、ターゲットが表示されます。
`source-in`	ソースとターゲットが重なっていて、両方とも不透明な場合、ソースが表示されます。他のどこでも透明性が表示されます。
`source-out`	ソースとターゲットが重なっていない場所では、ソースが表示されます。他のどこでも透明性が表示されます。
`source-over`	不透明なソースがある場合、ソースが表示されます。の目的地に他の場所に表示されます。
`lighter`	ソース色とターゲット色が相互に重なり合い、色が明るくなり、1の色値（その色の最大明るさ）を移動します。
`xor`

HTML5キャンバス構成例

これは合成モードとalpha値を使用できるサンプルキャンバスです。ボタンをクリックして合成モードを変更できます。キャンバスの下のコントロールを使用してAlphaモードを変更できます。

globalAlpha

のテキストフィールドがglobalAlphaで見える場合は、0から10の間の値を使用してください。コードは値を0から1の間の値を使用してください。そうでない場合は、スライダーを使用してください。
注意：この記事を執筆した際、FirefoxとChromeがこれらの合成モードを処理する方法が異なっていました。また、rectsやtextと異なり、これらのモードの動作については、サポートする予定の各ブラウザで試行錯誤してください。

HTML5 Canvas 変換 HTML5 Canvasでイメージを描画