下面我的代码是针对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;
}
答案 0 :(得分:2)
c2.beginPath
的行已丢失()且应为c2.beginPath();
,因为它是一个函数。当没有调用beginPath时,clearPath将不起作用。