HTML5 Canvas-コンポジション

HTML5キャンバスは、すべての描画操作に影響する合成属性 globalCompositeOperation を提供します。

次の例に示すように、globalCompositeOperation属性を使用して、既存の図形の背後に新しい図形を描画し、特定の領域をマスクし、キャンバスからセクションをクリアできます。

globalCompositeOperationに設定できる次の値があります-

Sr.No.	Attribute & Description
1	source-over これはデフォルト設定であり、既存のキャンバスコンテンツの上に新しい図形を描画します。
2	source-in 新しいシェイプは、新しいシェイプとコピー先キャンバスの両方が重なる場所にのみ描画されます。それ以外はすべて透明になります。
3	source-out 新しい図形は、既存のキャンバスコンテンツと重ならない場所に描画されます。
4	source-atop 新しいシェイプは、既存のキャンバスコンテンツと重なる場所にのみ描画されます。
5	lighter 両方の形状が重なる場所では、色の値を追加して色を決定します。
6	xor シェイプは透明になり、他のすべての部分でオーバーラップし、通常に描画されます。
7	destination-over 既存のキャンバスコンテンツの背後に新しい図形が描画されます。
8	destination-in 既存のキャンバスコンテンツは、新しい形状と既存のキャンバスコンテンツの両方が重なる場所に保持されます。それ以外はすべて透明になります。
9	destination-out 既存のコンテンツは、新しいシェイプと重ならない場所に保持されます。
10	destination-atop 既存のキャンバスは、新しい形状と重なる場所にのみ保持されます。新しい形状は、キャンバスのコンテンツの背後に描画されます。
11	darker 両方の形状が重なる場所では、色の値を引くことで色が決定されます。

例

以下は、すべての可能な構成を作成するためにglobalCompositeOperation属性を利用する簡単な例です-

<!DOCTYPE HTML>

<html>
   <head>

      <script type = "text/javascript">
         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');

              //draw rectangle
               ctx.fillStyle = "#FF3366";
               ctx.fillRect(15,15,70,70);

              //set composite property
               ctx.globalCompositeOperation = compositeTypes[i];

              //draw circle
               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>

上記の例では、次の結果が生成されます-

Html5-canvas-composition

HTML5 Canvas-コンポジション

例