画布中的动画不起作用

The animation in the Canvas is not working

本文关键字：不起作用 动画 布中      更新时间：2023-09-26

我写了一个简单的代码来获取画布的上下文，并添加两个Rectange对象，以便将它们绘制到画布上。我的问题是，我无法为它们设置动画，因为当我尝试使用context.clearRect（）时；它抛出一个错误，声明上下文未定义。但除此之外，还有没有我已经不起作用的绘图方法呢。我想不出解决办法。我看到的错误是在Firebug控制台上。我把我的代码放在上

http://jsfiddle.net/shivkumarganesh/b8cKZ/

setTimeout(refresh, 1000);

就是问题所在。您正在调用此函数，但没有传递参数。也没有必要让refresh需要参数，因为您将必要的变量声明为全局变量。

drawObj.push(new Rectangle("20", "20", "30", "40", "#3A5BCD"));
drawObj.push(new Rectangle("50", "50", "100", "30", "#EF2B36"));

您正在传递x、y、宽度和高度的字符串。

objArray[i].width=objArray[i].width+j;
objArray[i].height=objArray[i].height+j;

这就是字符串串联，这意味着宽度最终是一个字符串，上面写着"300000000000000000"。。。

你应该学会使用Chrome的调试器（control+shift+j），用它很容易发现这样的问题

也可以使用requestAnimationFrame而不是setTimeout，并且不要在每帧中无意义地重新绘制所有内容100次：）

相关文章：