Html 填充由path2d对象定义的自定义对象

我正在尝试填充HTML5 canvas.context的path2d对象

我已根据此站点绘制了一条自定义路径，该路径为贝塞尔曲线：

但我无法用纯色填充它

下面是JSFIDLE中的一些代码来说明我的问题。如果我取消注释行

//this.ctx.stroke（this.p2d）然后将绘制贝塞尔曲线的轮廓，但我似乎无法填充完成的路径


constructor () {
    this.canv = document.getElementById('canv');
    this.ctx = this.canv.getContext('2d');
  this.ctx.beginPath();
  this.ctx.moveTo(160,350);
  this.ctx.restore();
  this.p2d = new Path2D();
    this.t = 0;
    this.currentPoint = [160,350];
  this.to = setInterval(() => this.plot(), 10, this.to);
}

plot(intid) {
      const p1x = 160;
      const p2x = 20;
      const p3x = 320;
      const p4x = 160;
      const p1y = 350;
      const p2y = 50;
      const p3y = 50;
      const p4y = 350;
      let t = this.t;
      let x = (((1 - t)*(1 - t)*(1 - t)) * p1x) + ((3 * ((1 - t) * (1 -t))) * (t * p2x)) + ((3 * ((1 - t) * (1 -t))) * (t * p3x)) + ((t * t * t) * p4x);
      let y = (((1 - t)*(1 - t)*(1 - t)) * p1y) + ((3 * ((1 - t) * (1 -t))) * (t * p2y)) + ((3 * ((1 - t) * (1 -t))) * (t * p3y)) + ((t * t * t) * p4y);
      this.t = t + 0.01;
      if (t <= 1.01) {

        //this.p2d.fillStyle = "#1000ff";
        this.p2d.moveTo(this.currentPoint[0], this.currentPoint[1]);
        this.p2d.lineTo(x, y);
        this.currentPoint[0] = x;
        this.currentPoint[1] = y;
        console.log(x + " " + y + " " + t)
      }
      else
      {
        //this.p2d.closePath();
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = "blue";
        this.ctx.fillStyle = "blue";
        //this.ctx.stroke(this.p2d);
        this.ctx.fill(this.p2d, "evenodd");
        clearInterval(this.to);  
      }
  }
}

Window.cl = new clazz();


构造函数（）{
this.canv=document.getElementById（'canv'）；
this.ctx=this.canv.getContext（'2d'）；
this.ctx.beginPath（）；
本.ctx.moveTo（160350）；
这个.ctx.restore（）；
this.p2d=新路径2d（）；
这个t=0；
this.currentPoint=[160350]；
this.to=setInterval（（）=>this.plot（），10，this.to）；
}
地块（intid）{
常数p1x=160；
常数p2x=20；
常数p3x=320；
常数p4x=160；
常数p1y=350；
常数p2y=50；
常数p3y=50；
常数p4y=350；
设t=this.t；
设x=（（1-t）*（1-t）*（1-t））*p1x+（（3*（（1-t）*（1-t）））*（t*p2x））+（（3*（（1-t）*（1-t）））*（t*p3x））+（（t*t*t）*p4x）；
设y=（（1-t）*（1-t）*（1-t））*p1y+（（3*（（1-t）*（1-t）））*（t*p2y））+（（3*（（1-t）*（1-t）））*（t*p3y））+（（t*t*t）*p4y）；
这.t=t+0.01；
如果（t每次你搬家时都没有东西可填充…

您在末尾绘制的是使用该技术的线条，请参见下面代码中的差异


canv=document.getElementById（'canv'）；
ctx=canv.getContext（'2d'）；
ctx.fillStyle=“蓝色”；
ctx.moveTo（10,10）；
ctx.lineTo（20,40）；
ctx.lineTo（99,40）；
ctx.lineTo（90,30）；
ctx.fill（）；
ctx.stroke（）；
ctx.moveTo（100,10）；
ctx.lineTo（120,40）；
ctx.moveTo（120,40）；
ctx.lineTo（200,40）；
ctx.moveTo（200,40）；
ctx.lineTo（190,30）；
ctx.fill（）；
ctx.stroke（）；
每次移动都将没有任何东西可填充…

您在末尾绘制的是使用该技术的线条，请参见下面代码中的差异


canv=document.getElementById（'canv'）；
ctx=canv.getContext（'2d'）；
ctx.fillStyle=“蓝色”；
ctx.moveTo（10,10）；
ctx.lineTo（20,40）；
ctx.lineTo（99,40）；
ctx.lineTo（90,30）；
ctx.fill（）；
ctx.stroke（）；
ctx.moveTo（100,10）；
ctx.lineTo（120,40）；
ctx.moveTo（120,40）；
ctx.lineTo（200,40）；
ctx.moveTo（200,40）；
ctx.lineTo（190,30）；
ctx.fill（）；
ctx.stroke（）；