HTML5 Canvasの合成（コンポジット）とは？globalCompositeOperation属性の使い方を解説
HTML5のCanvasには、すべての描画操作に影響を与えるglobalCompositeOperationという合成（コンポジット）属性が用意されています。この属性を活用することで、既存の図形の背後に新しい図形を描画したり、特定の領域をマスクしたり、キャンバスの一部を消去したりといった高度なグラフィック表現が可能になります。
主な合成モードの種類と特徴
globalCompositeOperationには、以下のような値を設定できます。それぞれのモードによって、新しい図形（ソース）と既存の図形（デスティネーション）の重なり方が変化します。
- source-over：デフォルト設定。新しい図形が既存の図形の上に描画されます。
- source-in：新しい図形は、既存の図形と重なる部分のみ描画されます。
- source-out：新しい図形は、既存の図形と重ならない部分のみ描画されます。
- source-atop：新しい図形は、既存の図形の範囲内にのみ描画されます。
- destination-over：新しい図形が既存の図形の背後に描画されます。
- destination-in：既存の図形は、新しい図形と重なる部分のみ残ります。
- destination-out：既存の図形から、新しい図形と重なる部分が消去されます。
- destination-atop：既存の図形は新しい図形と重なる部分のみ表示され、新しい図形はその背後に描画されます。
- lighter：両方の図形が表示され、重なった部分の色が加算されて明るくなります。
- darker：重なった部分の色が減算されて暗くなります（※最新の仕様では非推奨）。
- copy：新しい図形のみが表示され、既存の図形はすべて消去されます。
- xor：重なった部分が透明になり、それ以外の部分だけが表示されます。
サンプルコード
次の例では、12種類の合成モードをそれぞれ別のキャンバスに適用し、描画結果の違いを一覧できるようにしています。まず赤い四角形を描画し、その後globalCompositeOperationに各モードを設定してから青い円を描くことで、各モードの効果を視覚的に比較できます。
<!DOCTYPE HTML>
<html>
<head>
<script>
var compositeTypes = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out',
'destination-atop','lighter','darker','copy','xor'
];
function drawShape(){
for (i=0;i<compositeTypes.length;i++){
var label = document.createTextNode(compositeTypes[i]);
document.getElementById('lab'+i).appendChild(label);
var ctx = document.getElementById('tut'+i).getContext('2d');
// 四角形を描画
ctx.fillStyle = "#FF3366";
ctx.fillRect(15,15,70,70);
// 合成モードを設定
ctx.globalCompositeOperation = compositeTypes[i];
// 円を描画
ctx.fillStyle = "#0066FF";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
}
}
</script>
</head>
<body onload="drawShape();">
<table border="1" align="center">
<tr>
<td><canvas id="tut0" width="125" height="125"></canvas><br/>
<label id="lab0"></label>
</td>
<td><canvas id="tut1" width="125" height="125"></canvas><br/>
<label id="lab1"></label>
</td>
<td><canvas id="tut2" width="125" height="125"></canvas><br/>
<label id="lab2"></label>
</td>
</tr>
<tr>
<td><canvas id="tut3" width="125" height="125"></canvas><br/>
<label id="lab3"></label>
</td>
<td><canvas id="tut4" width="125" height="125"></canvas><br/>
<label id="lab4"></label>
</td>
<td><canvas id="tut5" width="125" height="125"></canvas><br/>
<label id="lab5"></label>
</td>
</tr>
<tr>
<td><canvas id="tut6" width="125" height="125"></canvas><br/>
<label id="lab6"></label>
</td>
<td><canvas id="tut7" width="125" height="125"></canvas><br/>
<label id="lab7"></label>
</td>
<td><canvas id="tut8" width="125" height="125"></canvas><br/>
<label id="lab8"></label>
</td>
</tr>
<tr>
<td><canvas id="tut9" width="125" height="125"></canvas><br/>
<label id="lab9"></label>
</td>
<td><canvas id="tut10" width="125" height="125"></canvas><br/>
<label id="lab10"></label>
</td>
<td><canvas id="tut11" width="125" height="125"></canvas><br/>
<label id="lab11"></label>
</td>
</tr>
</table>
</body>
</html>
まとめ
globalCompositeOperation属性を使いこなすことで、Canvas上での図形の重ね合わせやマスク処理、部分的な消去など、表現の幅が大きく広がります。特にdestination-outは消しゴムのような効果を実現でき、lighterは光の演出などに活用できます。主要なブラウザでサポートされているため、実務でも安心して利用できるでしょう。
-
HTML5のCanvasで使える無料ライブラリとは？おすすめ3選をわかりやすく解説
Webサイトにインタラクティブな要素を追加したいなら、Canvas用の無料ライブラリを活用することで開発作業を大幅に効率化できます。まずは、HTML5でキャンバスを作成する基本方法から見ていきましょう。HTML5のcanvasタグの基本HTMLの<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するために使用される要素です。このタグはHTML5で新たに導入されました。以下のコードを実行すると、HTML5でキャンバスを作成できます。サンプルコード<!DOCTYPE html> <html> &n
-
C#のコンポジション（構成）とは？集約との違いとコード例でわかりやすく解説
C#におけるコンポジション（Composition：構成）は、オブジェクト間の関係を表す設計手法の一つです。親オブジェクトが削除されると、その子オブジェクトも同時に無効になるという強い依存関係が特徴です。 コンポジションの基本概念 コンポジションは、集約（Aggregation）の一種であり、「部分と全体（part-of）」の関係を表現します。両者の大きな違いは、オブジェクトのライフサイクルにあります。 コンポジション： 親オブジェクトが破棄されると、子オブジェクトも一緒に破棄される（強い所有関係） 集約： 親オブジェクトが破棄されても、子オブジェクトは独立して存在し続けられる（弱い所有関係