本文介绍如何利用 Canvas 的 clip() 方法创建一个裁剪路径，使文字、矩形、圆形等所有后续绘制内容自动被限制在指定矩形区域内，实现类似“浮动窗口”的视觉效果，避免内容溢出。
本文介绍如何利用 canvas 的 `clip()` 方法创建一个裁剪路径，使文字、矩形、圆形等所有后续绘制内容自动被限制在指定矩形区域内，实现类似“浮动窗口”的视觉效果，避免内容溢出。
在 Canvas 开发中，若需实现一个“内容不越界”的局部视图（例如悬浮信息窗、UI 面板或画布内嵌编辑区），仅靠绘制顺序无法解决遮挡问题——后绘制的全局元素会覆盖窗内内容的边缘部分，导致视觉断裂。真正可靠的方案是启用 Canvas 的裁剪机制（clipping region），它能永久性地将后续所有 2D 绘制操作限制在指定路径范围内，超出部分自动被丢弃。
核心方法是 ctx.clip()：它基于当前路径（path）创建一个不可见的裁剪边界。调用前需先用 beginPath() + 形状方法（如 rect()、arc() 或 moveTo()/lineTo()）定义封闭路径，再调用 clip() 生效。此后所有绘图操作（fill()、stroke()、fillText()、drawImage() 等）均受该裁剪区域约束。
以下是一个完整示例，创建一个 100×200 像素的绿色边框“窗口”，并在其中安全绘制圆形和文本：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 设置画布尺寸（适配视口）
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义窗口区域
const windowX = 50;
const windowY = 50;
const windowWidth = 100;
const windowHeight = 200;
// 可选：绘制窗口边框（非裁剪区域，用于视觉参考）
ctx.strokeStyle = "green";
ctx.lineWidth = 2;
ctx.strokeRect(windowX, windowY, windowWidth, windowHeight);
// ✅ 关键步骤：定义并激活裁剪路径
ctx.beginPath();
ctx.rect(windowX, windowY, windowWidth, windowHeight);
ctx.clip(); // 此后所有绘制仅在该矩形内生效
ctx.closePath();
// 在裁剪区域内绘制内容（自动被截断）
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2); // 圆心在 (150,150)，半径 50 → 部分超出窗口右下角
ctx.fillStyle = "red";
ctx.fill(); // 超出窗口的部分将被自动裁剪，仅显示可见区域
// 文本同样受约束
ctx.font = "14px sans-serif";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Hello!", windowX + windowWidth / 2, windowY + windowHeight / 2);
⚠️ 重要注意事项：
-
clip() 的作用范围是当前 canvas state，且不可逆；若需在多个区域分别裁剪，应配合 save() / restore() 使用：
ctx.save(); // 保存当前状态（含裁剪区域） ctx.beginPath(); ctx.rect(x1,y1,w1,h1); ctx.clip(); // ... 绘制区域1 ctx.restore(); // 恢复原始裁剪区域（通常是全画布） ctx.save(); ctx.beginPath(); ctx.rect(x2,y2,w2,h2); ctx.clip(); // ... 绘制区域2 ctx.restore();
裁剪路径必须是封闭路径（closePath() 或自动闭合的 rect()/arc()），否则行为未定义；
clip() 不影响已绘制内容，只约束后续绘图命令；
若需清除裁剪（恢复全画布绘制），最稳妥方式是 restore() 到未裁剪的状态，或重新 save() 后重置（无直接 clearClip() 方法）。
通过合理运用 clip()，你不仅能实现安全的内容容器，还可拓展至复杂场景：如圆形头像裁剪、地图视口限制、动态蒙版动画等。它是 Canvas 渲染控制中高效且基础的关键能力。
