HTML Canvas - clip() 方法

HTML Canvas 的clip() 方法是CanvasRenderingContext2D 接口的一部分，可用于将 Canvas 区域上的当前可用路径更改为新的裁剪区域。

我们可以通过添加各种样式和当前路径来更改裁剪区域。这会特别裁剪之前的路径并将新的路径数据添加到其中。

语法

以下是 HTML Canvas clip() 方法的语法：

CanvasRenderingContext2D.clip(path, fillrule);

参数

以下是此方法的参数列表：

序号	参数和描述
1	path 用于应用裁剪方法的路径。
2	fillrule 用于检查点是否在裁剪区域内或外的算法。此方法的可能值为：非零 (non-zero) 奇偶 (even-odd)

序号

参数和描述

path

用于应用裁剪方法的路径。

fillrule

用于检查点是否在裁剪区域内或外的算法。此方法的可能值为：

非零 (non-zero)
奇偶 (even-odd)

返回值

在画布元素上呈现形成到当前路径的裁剪区域。

示例

以下示例使用 HTML Canvas clip() 方法在 Canvas 元素上绘制一个圆圈并裁剪其中的部分区域。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.arc(100, 75, 50, 0, Math.PI * 2);
      context.clip();
      context.fillStyle = 'white';
      context.arc(0, 0, 50, 0, Math.PI * 1);
      context.fillStyle = 'black';
      context.arc(0, 0, 50, 0.2 * Math.PI, 0.3 * Math.PI);
      context.fill();
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出为：

示例

以下程序在 Canvas 元素上绘制一个矩形，并使用 clip() 方法裁剪其中的部分区域。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="260" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.rect(20, 20, 200, 150);
      context.stroke();
      context.clip();
      context.fillStyle = 'grey';
      context.fillRect(0, 0, 150, 100);
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出为：

html_canvas_paths.htm

打印页面