CanvasRenderingContext2D: clip() 方法

基线 广泛可用

此功能已建立完善，可在多种设备和浏览器版本上运行。自 2015 年 7 月.

报告反馈

Canvas 2D API 的 CanvasRenderingContext2D.clip() 方法将当前或给定的路径转换为当前裁剪区域。如果存在，先前裁剪区域将与当前或给定路径相交以创建新的裁剪区域。

Star-shaped clipping region

在下图中，红色轮廓代表一个类似于星形的裁剪区域。只有棋盘图案中位于裁剪区域内的部分才会被绘制。

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

语法

注意：裁剪路径无法直接恢复。您必须在调用 clip() 之前使用 save() 保存画布状态，并在使用 restore() 完成裁剪区域中的绘制后恢复状态。
clip()
clip(path)
clip(fillRule)
clip(path, fillRule)

js

参数

fillRule

确定点位于裁剪区域内还是外的算法。可能的值

nonzero

非零绕线规则。默认规则。

evenodd

奇偶绕线规则。

path

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

返回值

示例

无 (undefined).

简单的裁剪区域

HTML

此示例使用 clip() 方法根据圆形弧的形状创建裁剪区域。然后绘制两个矩形；只有位于裁剪区域内的部分才会被渲染。
<canvas id="canvas"></canvas>

JavaScript

html

注意：裁剪路径无法直接恢复。您必须在调用 clip() 之前使用 save() 保存画布状态，并在使用 restore() 完成裁剪区域中的绘制后恢复状态。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, 100, 100);

裁剪区域是一个完整的圆形，圆心位于 (100, 75)，半径为 50。

结果

指定路径和 fillRule

HTML

此示例使用 clip() 方法根据圆形弧的形状创建裁剪区域。然后绘制两个矩形；只有位于裁剪区域内的部分才会被渲染。
<canvas id="canvas"></canvas>

JavaScript

注意：裁剪路径无法直接恢复。您必须在调用 clip() 之前使用 save() 保存画布状态，并在使用 restore() 完成裁剪区域中的绘制后恢复状态。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create clipping path
let region = new Path2D();
region.rect(80, 10, 20, 130);
region.rect(40, 50, 100, 50);
ctx.clip(region, "evenodd");

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

裁剪区域是一个完整的圆形，圆心位于 (100, 75)，半径为 50。

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

创建复杂的裁剪区域

HTML

此示例使用 clip() 方法根据圆形弧的形状创建裁剪区域。然后绘制两个矩形；只有位于裁剪区域内的部分才会被渲染。
<canvas id="canvas"></canvas>

JavaScript

注意：裁剪路径无法直接恢复。您必须在调用 clip() 之前使用 save() 保存画布状态，并在使用 restore() 完成裁剪区域中的绘制后恢复状态。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create two clipping paths
let circlePath = new Path2D();
circlePath.arc(150, 75, 75, 0, 2 * Math.PI);
let squarePath = new Path2D();
squarePath.rect(85, 10, 130, 130);

// Set the clip to the circle
ctx.clip(circlePath);
// Set the clip to be the intersection of the circle and the square
ctx.clip(squarePath);

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

裁剪区域是一个完整的圆形，圆心位于 (100, 75)，半径为 50。

规范

此示例使用两个路径（一个矩形和一个正方形）创建一个复杂的裁剪区域。clip() 方法被调用两次，第一次使用 Path2D 对象将当前裁剪区域设置为圆形，第二次将圆形裁剪区域与正方形相交。最终裁剪区域是代表圆形和正方形相交的形状。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-clip-dev

另请参阅

  • 且已启用 JavaScript。启用 JavaScript 以查看数据。