7个惊艳的HTML5 Canvas动画效果及源码

HTML5非常强大，尤其是现在大部分浏览器都支持HTML5和CSS3，用HTML5制作的动画也多了起来。另外，Canvas上绘制图形非常简单，本文就分享了一些强大的HTML5 Cnavas动画，一起来看看。

1、HTML5 Canvas瀑布动画 超逼真

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





在线演示 / 源码下载

2、HTML5 Canvas彩色像素进度条动画

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





在线演示 / 源码下载

3、HTML5 Canvas粒子模拟效果

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





在线演示 / 源码下载

4、HTML5 Canvas放射线动画

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





在线演示 / 源码下载

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

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





在线演示 / 源码下载

6、HTML5 Canvas 3D折线图表应用

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





在线演示 / 源码下载

7、HTML5 SVG 树枝分叉动画特效

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





在线演示 / 源码下载

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