HTML5 Canvas - 圖層合成

HTML5 canvas 提供了合成屬性globalCompositeOperation，它會影響所有繪圖操作。

我們可以使用 globalCompositeOperation 屬性在現有形狀後面繪製新形狀，遮蓋某些區域，從畫布中清除部分內容，如下例所示。

以下是可以為 globalCompositeOperation 設定的值：

序號	屬性和描述
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.htm

列印頁面