HTML5-canvas实现简单动画

Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。它最初由苹果内部使用自己Mac OS X WebKit推出，供应用程序使用像仪表盘的构件和Safari浏览器使用。

后来，有人通过Gecko内核的浏览器（尤其是Mozilla 和Firefox），Opera和Chrome ，和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。Novell生产的XForms处理器插件作为Internet Explorer插件支持Canvas 元素。也有人努力使用VML和JavaScript在Internet Explorer支持Canvas功能而不需要插件。Google也已开始了一个项目，使用同样的技术在Internet Explorer支持Canvas能力。但Internet Explorer 自Internet Explorer 9起已经可以支持 canvas 元素。

Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。 JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API ，从而使动态生成的图形。Canvas还有一些可能的用途， 包括使用Canvas构造图形，动画，游戏和图片。

下面是Canvas实现的简单动画：弹球动画

   

 

Ps:两个函数的说明

• setInterval(code,millisec) 按照指定的周期来调用函数,返回值为定时器的ID值
• clearInterval(idofsetInterval)取消由setInterval()方法设置的定时器。