javascript - clearRect不清除 Canvas 中的任何内容

下面的代码用于Chris Courses的“圆周运动”教程，但是我无法弄清为什么clearRect无法正常工作。一定是我没有看到的东西，现在我还有另外两个画布动画正在工作，但是这个动画无法清除矩形，这让我发疯了...。

感谢任何有时间帮助的人！

function spirals() {
  const canvas2 = document.getElementById('mycanvas');
  canvas2.width = document.getElementById('mycanvas').scrollWidth;
  canvas2.height = document.getElementById('mycanvas').scrollHeight;
  const c2 = canvas2.getContext('2d');

  const spiralColorArray = [
    '#ff0000',
    '#00ff00',
    '#0000ff'
  ];

  addEventListener('resize', () => {
    canvas2.width = document.getElementById('mycanvas').scrollWidth;
    canvas2.height = document.getElementById('mycanvas').scrollHeight;

    init();
  });

  function SpinnerIcon(h, v, radius, color) {
    this.h = h;
    this.v = v;
    this.color = color;
    this.radius = radius;

    this.update = () => {
      this.h += 1;
      this.draw();
    };

    this.draw = () => {
      c2.beginPath;
      c2.arc(this.h, this.v, this.radius, 0, Math.PI*2, false);
      c2.fillStyle = this.color;
      c2.fill();
      c2.closePath();
    }
  }

  function init() {
    spinnerArray = [];

    for(let i=0; i < 1; i++) {
      spinnerArray.push(new SpinnerIcon(canvas2.width/2, canvas2.height/2, 5, 'red'))
    }
  }

  let spinnerArray;

  function animate() {
    requestAnimationFrame(animate);

    c2.clearRect(0, 0, canvas2.width, canvas2.height);

    spinnerArray.forEach(parti => {
      parti.update();
    })
  }

  init();
  animate();
}

spirals();

#mycanvas {
  background: blue;
}

<canvas id="mycanvas" width="500" height="500">

最佳答案

您使用c2.beginPath的行缺少（），并且应为c2.beginPath();，因为它是一个函数。当未调用beginPath时，clearPath将不起作用。