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实现的简单动画:弹球动画

   HTML5-canvas

 

Ps:两个函数的说明

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

Ludis

Posted on

2014-02-04

Updated on

2014-02-21

Licensed under

Comments