HTML5 / Javascript-我的简单画布动画不起作用

Question

I thought this would be the kind of thing there would be plenty of tutorials on, however every one I found was either over-complicated, vague, or used features not yet widely supported. So, I decided to try it on my own. My code is below.

function drawStuff(){
var x = document.getElementById("myCanvas");
var canvas = x.getContext('2d');

var i;

function animate(){
    canvas.clearRect(0,0,500,500);
    canvas.fillStyle="red";
    canvas.fillRect(0,i,50,50);
    i++;
}

    windows.setInterval(animate(), 125);
}
window.addEventListener("load", drawStuff, false);

Why isn't this working? Do I misunderstand what the setInterval does? Any help is appreciated.

Answer 1

请将值设置为变量i

Answer 2

There is a typo in that you refer to windows rather than window , and the argument supplied should be a reference to the function you want to run, so it should be animate rather than animate() which would just call the animate function immediately.

Those two changes should make:

window.setInterval(animate, 125);