7款炫酷的HTML5 Canvas动画特效

HTML5
2015-01-14
这是一个很逼真的HTML5瀑布动画,基于Canvas实现的,效果相当酷。
标签: HTML5 Canvas HTML5 Canvas html5网站
1、HTML5Canvas瀑布动画超逼真

这是一个很逼真的HTML5瀑布动画,基于Canvas实现的,效果相当酷。


在线演示源码下载


2、HTML5Canvas彩色像素进度条动画

这也是一款基于HTML5Canvas的动画特效,它是一个很有创意的HTML5进度条,大家可以试试。


在线演示源码下载


3、HTML5Canvas粒子模拟效果

这 是一款利用HTML5Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成 一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感。


在线演示源码下载


4、HTML5Canvas放射线动画

这款HTML5Canvas尽管不怎么实用,但是你可以从中学到很多HTML5的相关知识,包括如何绘制动态直线,如果计算节点之间的距离等。


在线演示源码下载


5、HTML5动感的火焰燃烧动画特效

这是一款非常逼真而且炫酷的HTML5火焰动画,火焰的窜动跟真的蜡烛火焰差不多。


在线演示源码下载


6、HTML5Canvas3D折线图表应用

这款HTML5图表很特别,首先它是基于Canvas的,其次它有3D的折线动画。


在线演示源码下载


7、HTML5SVG树枝分叉动画特效

它是一个可以自动分叉的树,动画将以二叉树的形式展开。这三颗SVG树先是用svg的g画笔来定义这些树枝,然后利用javascript来实现动态改变g从而实现树枝的分叉展开动画。


在线演示源码下载



以上这7款HTML5Canvas动画都非常炫酷,你可以下载源码来研究HTML5的相关知识。