html - 为什么这个 html5 画布动画不起作用？

Question

所以我试图在 Canvas 中加深对动画的理解，但由于某种原因，这段代码不起作用。黄色矩形出现，但位置没有迭代。<script src = "images/drawing.js"></script>这个脚本在我的 html 代码中被引用。这是绘图.js：

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

Answer 1

更改setInterval(animateBox(context), 30);为

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

我认为这就是问题所在。这个问题有点模糊。确保您也在调用该init()函数（尽管您可能是）。