如何用Canvas API绘制并填充两条微偏移贝塞尔曲线围成的区域

嘿，我完全懂你卡在哪了——用两条微偏移的贝塞尔曲线围出区域并填充，核心问题就是要把这两条曲线拼成一个闭合的路径环，这样Canvas的fill()才能识别出要填充的区域。我给你拆解个靠谱的实现思路和代码示例：

核心思路 #

要填充两条贝塞尔之间的区域，你需要构建一个连续的闭合路径：

1. 从起点出发，沿第一条贝塞尔曲线画到终点
2. 紧接着从终点出发，沿反向的第二条贝塞尔曲线画回起点
3. 这样两条曲线就形成了一个封闭的“环”，fill()就能正常工作了

具体代码示例 #

假设你已经有了两个端点和两条贝塞尔的控制点，直接看代码：

const canvas = document.getElementById('yourCanvas');
const ctx = canvas.getContext('2d');

// 定义基础的两个端点
const start = { x: 60, y: 160 };
const end = { x: 440, y: 160 };

// 微偏移的贝塞尔控制点（比如上下各偏移一点，保证两条曲线平行）
const ctrlTop = { x: 250, y: 60 };  // 上方曲线的控制点
const ctrlBottom = { x: 250, y: 260 }; // 下方曲线的控制点

ctx.beginPath();
// 第一步：画第一条贝塞尔（从起点到终点）
ctx.bezierCurveTo(ctrlTop.x, ctrlTop.y, ctrlTop.x, ctrlTop.y, end.x, end.y);
// 第二步：画反向的第二条贝塞尔（从终点回到起点，注意控制点顺序对应）
ctx.bezierCurveTo(ctrlBottom.x, ctrlBottom.y, ctrlBottom.x, ctrlBottom.y, start.x, start.y);
// 可选：闭合路径（这里其实已经回到起点，不加也能填充，但加上更规范）
ctx.closePath();

// 设置填充样式并填充
ctx.fillStyle = '#f0f5ff';
ctx.fill();

关键细节说明 #

• 为什么要反向画第二条曲线？因为Canvas的路径是“连续路径”，从终点往起点画第二条贝塞尔，才能和第一条曲线形成闭合的环，而不是两条独立的曲线。
• 如果你的偏移不是对称的，只要保证第二条曲线的控制点是对应偏移后的位置，反向绘制时的参数顺序正确就行（贝塞尔的参数是：控制点1、控制点2、终点，反向的话就把终点换成起点，控制点位置不变）。
• 如果你需要动态计算偏移的贝塞尔控制点，可以用向量计算：比如先算出原贝塞尔的切线方向，再生成垂直方向的偏移向量，加到原控制点上，得到偏移后的控制点，这样能保证两条曲线的偏移量均匀。

替代方案（简单场景） #

如果你的两条曲线是完全平行的，也可以用stroke()来模拟填充：把线条宽度设为两条曲线之间的距离，然后描边。但这种方法只适合简单的对称场景，精确填充还是闭合路径的方法更可靠。

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