画布中的动画不起作用

问题描述：

我写了一个简单的代码来获取画布的上下文并添加两个Rectange对象以便将它们绘制到画布上。我的问题是我无法为它们设置动画，因为当我尝试使用context.clearRect（）;它会抛出一个错误，指出上下文未定义。但有没有其他方法，即使我不会工作的绘图方法。我无法找出解决方案。我看到的错误是在Firebug控制台上。我有我的小提琴代码在画布中的动画不起作用

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

答

setTimeout(refresh, 1000);

的问题。你正在调用这个函数，但你没有传递参数。由于您将必要变量声明为全局变量，因此也不需要refresh需要参数。

您可以编辑代码，以便有一个动画不要白白重新绘制的一切100倍？ PLS – 2012-03-30 09:24:01

答

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;

...所以这样做字符串连接，这意味着宽度最终成为一个字符串说： “3000000000000000000000” ......

你应该学会使用Chrome的调试器（控制+ Shift + J）用它找到这样的问题真的很容易。

还可以使用requestAnimationFrame而不是setTimeout和每帧:)

画布中的动画不起作用

相关推荐