Canvas混合图形绘制异常求助：交集空白，需可裁剪单形状

这个问题的核心原因是路径的连接方式或子路径的环绕方向导致填充规则抵消了交集区域，结合你不能使用globalCompositeOperation的限制，我们可以通过正确构建多子路径的方式来实现合并填充：

关键解决方案 #

要得到合并的填充区域，你需要确保两个图形是路径中的独立子路径，并且环绕方向一致（默认都是顺时针即可），具体步骤：

• 用beginPath()开启新路径
• 绘制第一个图形（如矩形）
• 使用moveTo()将路径光标移动到第二个图形的起始位置，避免两个图形之间出现多余的连线（这是导致交集空白的常见原因）
• 绘制第二个图形（如圆弧）
• 调用fill()（默认使用nonzero填充规则，会合并所有同向子路径的区域）

代码示例 #

const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');

// 构建合并路径
ctx.beginPath();
// 第一个子路径：矩形（顺时针绘制）
ctx.rect(50, 50, 100, 100);
// 移动到圆弧的起始点，避免和矩形路径连接
const arcStartX = 150 + 50 * Math.cos(0); // 圆弧中心(150,150)，半径50，角度0的点
const arcStartY = 150 + 50 * Math.sin(0);
ctx.moveTo(arcStartX, arcStartY);
// 第二个子路径：圆弧（默认顺时针绘制）
ctx.arc(150, 150, 50, 0, Math.PI * 2);

// 填充合并后的区域
ctx.fillStyle = '#2ecc71';
ctx.fill();

// 用这个路径执行clip操作
ctx.save();
// 重新绘制相同路径用于裁剪（确保路径状态正确）
ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.moveTo(arcStartX, arcStartY);
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.clip();

// 绘制被裁剪的内容
ctx.fillStyle = '#3498db';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.restore();

为什么之前会出现交集空白？ #

• 如果你没有使用moveTo()，Canvas会自动把前一个路径的终点和圆弧的起始点用直线连接，形成一个连续的复合路径而非两个独立子路径，填充时这种连接会导致路径的环绕方向在交集区域相互抵消，出现空白。
• 连续调用rect()或arc()时，rect()方法内部会自动调用moveTo()到矩形左上角，每个rect()都是独立子路径；连续arc()如果没有额外连线，也会保持子路径独立，因此填充正常。

额外优化技巧 #

你可以使用Path2D对象来构建和保存路径，方便重复用于填充、裁剪等操作，代码更简洁：

const combinedPath = new Path2D();
combinedPath.rect(50, 50, 100, 100);
combinedPath.moveTo(arcStartX, arcStartY);
combinedPath.arc(150, 150, 50, 0, Math.PI * 2);

// 填充合并区域
ctx.fill(combinedPath);
// 执行裁剪
ctx.clip(combinedPath);

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