【第2章 绘制】2.15 剪辑区

前言

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

备注：
请注意，裁剪区域仅由添加到路径中的形状构成。它不适用于直接绘制到画布上的形状基元，比如 fillRect()。相反，在调用 clip() 前，你需要使用 rect() 将一个矩形形状添加到路径中。
裁剪路径不能直接撤销。在调用 clip() 前，你必须使用 save() 保存画布状态，并在裁剪区域完成绘制后使用 restore() 还原。

一个简单的裁剪区域

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

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);

创建复杂的裁剪区域

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

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);