JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 Canvasの合成属性（globalCompositeOperation）とは？種類と使い方を解説

HTML5のCanvasでは、globalCompositeOperationという合成（コンポジット）属性を使用することで、図形同士を重ねて描画する際の表示方法を細かく制御できます。この属性は、すべての描画操作に影響を与える重要なプロパティです。

globalCompositeOperationで指定できる合成モード一覧

この属性には、以下の12種類の値を設定できます。それぞれ、既に描かれている図形（destination：転送先）と、これから描画する図形（source：転送元）がどのように合成されるかが異なります。

  • source-over：転送元を転送先の上に描画（デフォルト）
  • source-in：転送元と転送先が重なる部分のみ転送元を表示
  • source-out：転送先と重ならない部分のみ転送元を表示
  • source-atop：転送先と重なる部分に転送元を描画
  • destination-over：転送先を転送元の上に描画
  • destination-in：転送元と重なる部分のみ転送先を表示
  • destination-out：転送元と重ならない部分のみ転送先を表示
  • destination-atop：転送元と重なる部分に転送先を描画
  • lighter：両方の図形を加算合成して明るく表示
  • darker：両方の図形を減算合成して暗く表示
  • copy：転送元のみを表示し、転送先は無視
  • xor：重ならない部分だけを透明合成で表示

サンプルコード：すべての合成モードを一覧で確認する

以下のコードは、12種類の合成モードをそれぞれ別のキャンバスに描画し、一覧として比較できるデモです。赤い四角形の上に、各モードを適用した青い円を重ねて描きます。

<!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>

コードのポイント解説

1. 描画の順序が重要

globalCompositeOperationは「既に描画されている内容」と「これから描画する内容」の関係を決めるため、必ず先に背景となる図形を描いてから、プロパティを設定し、次の図形を描画します。

2. 各キャンバスごとに独立したコンテキストを取得

このサンプルでは、getContext('2d')を使って各キャンバスの描画コンテキストを個別に取得しています。これにより、それぞれのキャンバスに異なる合成モードを適用できます。

3. ブラウザ間の互換性に注意

古い仕様ではdarkerが定義されていましたが、現在の標準仕様からは削除されています。代わりにCSSのブレンドモードやmultiplyなどの新しい合成モードが利用可能です。実装する際は、対象ブラウザでの動作確認をおすすめします。

まとめ

globalCompositeOperationを使いこなすことで、マスク処理、光の表現、透過合成など、表現力豊かなグラフィックスをCanvas上で実現できます。まずは実際にコードを実行して、各モードの見え方の違いを確認してみると理解が深まります。

  1. HTML5でCanvas（キャンバス）を中央に配置する方法を徹底解説

    HTML5で<canvas>要素を画面の中央に配置する最もシンプルな方法は、canvasタグを<div>タグで囲み、そのdivに対して中央揃え（text-align:center）を指定することです。親要素であるdivが中央に配置されると、その中にあるcanvasも自動的に中央に表示されます。基本的な実装例<!DOCTYPE html> <html>    <body>       <div style=text-align:center;

  2. HTMLのcanvas要素におけるwidth属性の使い方を徹底解説

    canvas要素のwidth属性とは HTMLの<canvas>要素におけるwidth属性は、キャンバスの幅をピクセル単位で指定するために使用します。キャンバス上に図形や画像を描画する際、描画領域のサイズを明示的に定義することで、意図したレイアウトを実現できます。 基本的な構文 width属性の基本的な記述方法は以下のとおりです。 <canvas width=pixels_val> pixels_val の部分には、キャンバスの幅として設定したい数値（ピクセル単位）を指定します。 width属性の実装例 それでは、<canvas>要素のwidth属性を実