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

Question

下面的代码适用于 Chris 类(class)“圆周运动”教程，但我不明白为什么我的clearRect 不起作用。这一定是我没有看到的东西，我现在还有另外两个 Canvas 动画正在工作，但这一个不会清除矩形，它让我发疯......

感谢任何有时间提供帮助的人!

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">

Answer 1

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