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()函数，后者将其转换为剪切路径，而不是描边或填充路径。

剪辑示例

下面的代码实现了canvas元素的裁剪方法。

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

输出

上述代码的输出如下所示

裁剪示例