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

Question

我认为这将是那种将有大量的教程的事情，但是我发现每一个都是过于复杂，模糊或使用的功能还没有广泛支持。所以，我决定自己尝试一下。我的代码如下。

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

为什么不能正常工作？我误解了setInterval的作用吗？任何帮助表示赞赏。

Answer 1

请设定值变量i

Answer 2

存在这样一个错字您参考windows而非window，并提供应该是要运行的函数的引用的说法，所以它应该是animate而不是animate()，它会立即调用动画函数。

这两个变化应：

window.setInterval(animate, 125);