HTML5-canvas实现简单动画

2014-02-04 18:42:32

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()方法设置的定时器。
如何为自己的网站添加favicon.ico?

如何为自己的网站安装favicon.ico标志? 其实很简单,分两步就完成了: 1.制作一个favicon.ico,可以在网上搜下在线制作ICO的做一个,然后上传到网站根目录; 2.在网站的源码里面添加如下代码,代码放在之间 <link rel="shortcut icon" href="favicon.ico" /> 这样就完成了~ PS:少了ico制作工具还是不行的,感谢在线工具的提醒,推荐一个实用的ico制作网站:http://www.atool.org/ico.php

html5绘图程序

众所周知,html 的canvas属性可以帮助我们画出漂亮的图片,还能做出炫酷的动画特效,可以说是HTML的一大亮点,做出来的动画甚至超过flash。 这里罗列出几个比较有名的html5绘图网站。 1.  Canvascape 3D 用HTML5 实现简单的第一人称射击游戏,虽然画面显得简单粗糙,但是一样能让人佩服。 2. CanvasGraph 一个用HTML5 Canvas 绘图的JavaScript 类库,不用再去辛苦画柱状图了。 3.Image reflections 用HTML5 Canvas 实现图像倒影,制作图片倒影从此轻松了。 4.Canvas Painter 一个超简单的Canvas画图程序,调色、笔触大小,该有的都有了,画完了还可以回放你操作的录影。 5. Sketchpad 6.painter 当然优秀的画图和动画制作软件还有谷歌的Google Web Designer(图形化的HTML5编程工具)