CanvasRenderingContext2D：clip() 方法

Canvas 2D API 的 CanvasRenderingContext2D.clip() 方法用于将当前或给定路径转换为当前裁剪区域。前面的裁剪区域（如果有的话）将与当前路径或给定路径相交，从而创建新的裁剪区域。

在下面的图像中，红色轮廓表示一个星形的裁剪区域。只有在裁剪区域内的棋盘格模式的部分才会被绘制出来。

星形裁剪区域

备注： 请注意，裁剪区域仅由添加到路径中的形状构成。它不适用于直接绘制到画布上的形状基元，比如 fillRect()。相反，在调用 clip() 前，你需要使用 rect() 将一个矩形形状添加到路径中。

备注： 裁剪路径不能直接撤销。在调用 clip() 前，你必须使用 save() 保存画布状态，并在裁剪区域完成绘制后使用 restore() 还原。

语法

clip()
clip(path)
clip(fillRule)
clip(path, fillRule)

参数

fillRule

这个算法判断一个点是在裁剪区域内还是在此之外。允许的值：

nonzero: 非零环绕规则，默认的规则。
evenodd: 非零环绕规则。

path

需要用作裁剪区域的 Path2D 路径。

返回值

无（undefined）。

示例

一个简单的裁剪区域

此示例使用 clip() 方法根据圆弧的形状创建一个裁剪区域。然后绘制了两个矩形；只有在裁剪区域内的部分才会被渲染。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

裁剪区域是一个以 (100, 75) 为中心点、以 50 为半径的完整圆。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 创建圆形裁剪区域
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();

// 绘制被裁剪的内容
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, 100, 100);

结果

指定路径和填充规则

此示例将两个矩形保存到一个 Path2D 对象中，然后使用 clip() 方法将其作为当前的裁剪区域。使用 "evenodd" 规则在裁剪矩形交集处创建一个孔洞；默认情况下（使用 "nonzero" 规则），不会有孔洞。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 创建裁剪路径
let region = new Path2D();
region.rect(80, 10, 20, 130);
region.rect(40, 50, 100, 50);
ctx.clip(region, "evenodd");

// 绘制被裁剪的内容
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

结果

创建复杂的裁剪区域

此示例使用了两个路径，一个矩形和一个正方形，来创建一个复杂的裁剪区域。clip() 方法被调用两次，第一次使用 Path2D 对象将当前裁剪区域设置为圆形，然后再次调用以将圆形裁剪区域与一个正方形相交。最终的裁剪区域是圆形和正方形的交集形状。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 创建两个裁剪路径
let circlePath = new Path2D();
circlePath.arc(150, 75, 75, 0, 2 * Math.PI);
let squarePath = new Path2D();
squarePath.rect(85, 10, 130, 130);

// 将裁剪区域设置为圆形
ctx.clip(circlePath);
// 将裁剪区域设置为圆形和正方形的交集
ctx.clip(squarePath);

// 绘制被裁剪的内容
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

结果

规范

Specification
HTML Standard # dom-context-2d-clip-dev

浏览器兼容性

BCD tables only load in the browser

参见

定义此方法的接口：CanvasRenderingContext2D