爲什麼不是這個html5 canvas動畫工作？

所以我想在Canvas中開發動畫的理解，但由於某些原因，這段代碼無法正常工作。黃色矩形顯示出來，但位置不會重複。該腳本在我的html代碼中被引用爲<script src = "images/drawing.js"></script>。這裏是drawing.js：爲什麼不是這個html5 canvas動畫工作？

var x = 400; 
var y = 300; 

function init() { 

    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    canvas.width = 800; 
    canvas.height = 600; 

    context.fillStyle = "black"; 
    context.fillRect(x,y,150,150); 
    setInterval(animateBox(context), 30); 

} 



function animateBox(context) { 

    context.clearRect(0,0,context.canvas.width,context.canvas.height); 
    x += 5; 
    context.fillStyle = "yellow"; 
    context.fillRect(x,y,150,150); 
}

來源

2013-02-18 kag359six

「不工作」不是一個很好的描述... – 2013-02-18 21:42:33

你是對的我會解決它。 – kag359six 2013-02-18 21:53:52

變化setInterval(animateBox(context), 30);到

setInterval(function(){ 
    animateBox(context) 
}, 30);

我認爲這就是問題所在。這個問題有點模糊。確保你也打電話給init()功能（儘管你可能是）。

來源

2013-02-18 22:08:48

爲什麼不是這個html5 canvas動畫工作？

回答

相關問題