HTML Canvas - 合成與裁剪

當需要繪製多個圖形時，我們通常會在 Canvas 元素上將圖形相互繪製。我們可以使用globalCompositeOperation屬性來排序合成圖形，並且還有一個屬性clip可以幫助我們隱藏構造圖形中不需要的部分。下面列出了這些屬性。

globalCompositeOperation − 透過使用此屬性，我們可以遮蔽現有的圖形，在現有的圖形上繪製新圖形，以及清除部分割槽域。此屬性接受的值在下面的表格中列出。

源上方	源內部	源外部	源疊加	目標上方	目標內部
目標外部	目標疊加	更亮	複製	異或	正片疊底
濾色	疊加	變暗	變亮	顏色減淡	顏色加深
強光	柔光	差值	排除	色相	飽和度
顏色	亮度

示例

以下示例實現了合成屬性。程式碼如下所示

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title> Composting </title>
   </head>
   <body onload="composting();">
      <canvas id="canvas" width="400" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function composting() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.fillStyle = 'blue';
            context.fillRect(25, 25, 200, 200);
            context.fill();
            context.globalCompositeOperation = 'darken';
            context.fillStyle = 'purple';
            context.fillRect(125, 25, 200, 200);
            context.fill();
            context.fillStyle = 'yellow';
            context.fillRect(225, 25, 100, 200);
            context.fill();
         }
      </script>
   </body>
</html>

輸出

上述程式碼返回的輸出為

裁剪類似於使用路徑在畫布元素中構建圖形，但它就像一個蒙版，可以移除獲得的圖形中不需要的部分。實現裁剪的方法如下所示

Clip() − 此方法將構建的路徑圖形轉換為裁剪路徑。它通常用於代替closePath()函式，該函式將其轉換為裁剪路徑，而不是描邊或填充路徑。

裁剪示例

以下程式碼為畫布元素實現了裁剪方法。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title> Clipping </title>
   </head>
   <body onload="clipping();">
      <canvas id="canvas" width="400" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function clipping() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.fillStyle = 'skyblue';
            context.fillRect(0, 0, 400, 250);
            context.fill();
            context.beginPath();
            context.arc(200, 125, 100, 1 * Math.PI, 5 * Math.PI);
            context.fillStyle = 'orange';
            context.fill();
            context.clip();
         }
      </script>
   </body>
</html>

輸出

上面程式碼生成的輸出如下所示：

列印頁面