Question

下面我的代码是针对Chris Courses的“循环运动”教程，但我无法弄清楚为什么我的clearRect无效。它必须是我没有看到的东西，我现在还有另外两个画布动画，但是这个不会清除矩形而且它让我疯了......

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

"npm update --save-dev"

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;
}

Answer 1

c2.beginPath的行已丢失（）且应为c2.beginPath();，因为它是一个函数。当没有调用beginPath时，clearPath将不起作用。

clearRect没有清除画布中的任何内容

1 个答案: