如何在Canvas的正方形内绘制无超出部分的圆形？

嘿，我完全懂你的需求——想要把圆形限制在指定正方形区域内，超出的部分直接隐藏，而且不想用那种手动拼接弧线段和直线的繁琐方法对吧？其实Canvas自带的**裁剪路径（Clipping Path）**就是解决这个问题的完美方案，不仅代码简洁，还能支持任意圆心位置和圆大小的通用场景，完全不用你去计算那些复杂的线段拼接。

核心思路 #

说白了就是先给Canvas设定一个“可视区域”（也就是你的正方形），之后所有的绘制操作都会被限制在这个区域内，超出的部分会自动被裁剪掉。具体步骤很简单：

• 保存当前Canvas的绘图状态（避免裁剪影响后续的其他绘制）
• 以你的正方形为路径，创建裁剪区域
• 正常绘制圆形，超出正方形的部分会被自动隐藏
• 恢复之前的绘图状态，结束裁剪

完整代码示例 #

下面是可以直接运行的通用代码，你只需要调整正方形和圆形的参数就能适配各种场景：

// 获取Canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// --------------------------
// 可自定义的参数部分
// --------------------------
// 正方形参数：左上角坐标、边长
const square = { x: 50, y: 50, size: 200 };
// 圆形参数：圆心坐标、半径（圆心可以在正方形内任意位置，半径也可大可小）
const circle = { cx: 180, cy: 120, radius: 100 };
// --------------------------

// 1. 保存当前绘图状态
ctx.save();

// 2. 创建裁剪路径：用正方形作为裁剪边界
ctx.beginPath();
ctx.rect(square.x, square.y, square.size, square.size);
ctx.clip(); // 启用裁剪，后续绘制仅在该正方形区域内生效

// 3. 绘制圆形（超出正方形的部分会被自动裁剪）
ctx.beginPath();
ctx.arc(circle.cx, circle.cy, circle.radius, 0, Math.PI * 2);
ctx.fillStyle = '#2ecc71';
ctx.fill();

// 4. 恢复绘图状态，解除裁剪限制
ctx.restore();

// 可选：绘制正方形边框，方便查看边界
ctx.beginPath();
ctx.rect(square.x, square.y, square.size, square.size);
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();

关键细节说明 #

• ctx.save() 和 ctx.restore()：这两个方法是配套使用的，用来保存和恢复Canvas的状态（包括裁剪区域、样式、变换等），避免这次的裁剪操作影响你之后在Canvas上的其他绘制。
• ctx.clip()：调用这个方法后，Canvas会把当前路径（也就是我们画的正方形）设置为裁剪区域，后续所有绘制的内容只有在这个区域内的部分才会显示。
• 通用性：不管你的圆心在正方形内的哪个位置，也不管圆的半径多大（哪怕圆大部分在正方形外），这个方法都能正确裁剪出正方形内的部分，完全不用你手动计算弧的起始角度或者拼接直线。

这样是不是比你之前的方法简单太多啦？试试调整参数，就能看到各种场景下的正确效果~

内容的提问来源于stack exchange，提问作者YellowBlue