Javascript 画布填充（）不'；与样条线一起使用时，不能按预期工作

我使用样条线算法绘制“闭合”图形，当我尝试在最后填充它们时，我没有得到预期的结果。如果您想玩它，请查看源代码

var canvas=document.getElementById（'canvas'）；
var点=[100300,10150100180120,1040200]；
var context=canvas.getContext（'2d'）；
drawSpline（上下文，点，0.4）；
函数drawSpline（ctx、pts、t）{
ctx.lineWidth=3；
var cp=[]；//控制点数组，如x0、y0、x1、y1，。。。
var n=点长度；
//附加和预附加结和控制点以闭合曲线
点推（点[0]、点[1]、点[2]、点[3]）；
临时取消移位（临时[n-1]）；
临时取消移位（临时[n-1]）；
对于（var j=0；j

以下是我得到的：

以下是我所期待的：

---

贝塞尔曲线的端点未连接以形成闭合路径。因此，您有多条独立曲线（如上图所示），而不是一条闭合曲线（如下图所示）

例如，请参见图像这一部分中的“挂接”

每个前处理曲线的终点必须是下一条曲线的起点，否则该曲线将不会闭合

通过移除循环中的

ctx.moveTo

，您几乎可以达到目的，但您需要关闭最后一个底部部分：

for(var i = 2; i < n+2; i += 2){
  ctx.bezierCurveTo(cp[2*i-2], cp[2*i-1], cp[2*i], cp[2*i+1], pts[i+2], pts[i+3]);
}

for（变量i=2；i

很好的thx提示，我明天会处理它。。。一吨泰铢

for(var i = 2; i < n+2; i += 2){
  ctx.bezierCurveTo(cp[2*i-2], cp[2*i-1], cp[2*i], cp[2*i+1], pts[i+2], pts[i+3]);
}