HTML5 canvas 效果

如今，HTML5 可谓如众星捧月一般，受到众多业内巨头的青睐。很多 Web 开发者也尝试着用 HTML5 来制作各种 Web 应用。HTML5 规范引进了很多新特性，其中最令人期待的之一就是 Canvas 元素，HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法，非常强大。今天这篇文章收集了20个惊艳的 HTML5 Canvas 应用试验推荐给大家。

01. Cloth Simulation

使用 Canvas 模仿的3D布料图案效果。

02. Particle System

这是我最喜欢的一个，非常神奇的效果！

03. Cloth Experiment

另外一个非常惊艳的布料模仿使用，拖动布料试试看！

04. Strange Attractors

使用 Canvas 绘制的非常精美的分形（fractals）效果。

05. Particle Letter Animation

动感的字母颗粒效果动画。

06. Canvas Nebula

使用 Canvas 绘制的星云图。

07. Bomomo

HTML5 Cavas 制作的画板，有各种各样的画刷。

08. Liquid Particles

多彩的流动颗粒。

09. Fake Floor Reflections

非常立体的倒影效果。

10. Sinous

一个非常有趣的游戏，没有想象的那么容易玩。

11. Water in HTML5

HTML5 Canvas 模拟的水！

12. Blob

水滴效果。

13. Magnetic System

模拟的磁场效果。

14. Trail

多彩的轨迹。

15. Particles

粒子系统。

16. Shattering Box Physics Simulation

模拟现实世界的物理动作，难以置信的逼真。

17. Flower Power

美丽的花！

18. 9Elements Particle Play

这个实验演示了 audio 和 canvas 标签的应用。

19. Beauty of Maths

数学之美！

20. Tree

Canvas 绘制的树。

21、HTML5 Canvas粒子模拟效果

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

在线演示        源码下载

22、HTML5火焰文字特效

今天我们分享的这款HTML5文字特效是火焰燃烧的效果，比较消耗CPU，但是动画效果还是比较酷的。另外，再推荐一款HTML5文字特效：HTML5像素文字爆炸重组动画特效

在线演示        源码下载

23、HTML5 Canvas粒子效果文字动画特效

之前我们分享过很多超酷的文字特效，其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效，输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。

在线演示        源码下载

24、HTML5 Canvas生成粒子效果的人物头像

今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像，你可以任意选择一张头像图片，接下来该图片会被打散成许多粒子，然后慢慢的重组成图片，鼠标滑过图片时粒子还会出现浮动的动画特效，看上去非常酷。

在线演示        源码下载

25、HTML5粒子效果的文字动画特效

今天要分享的也是一款基于HTML5的粒子效果的文字动画特效，并且它可以实现每个文字的逐帧播放，形成一句很浪漫的诗句。

在线演示        源码下载

26、HTML5 3D 粒子波浪动画特效

今天我们要在来分享一款升级版HTML5 3D粒子波浪动画特效，我们可以旋转不同的视角来欣赏粒子波浪的滚动特效。HTML5在动画制作方面的确让人眼前一亮。

在线演示        源码下载

27、HTML5 Canvas 3D 倒计时爆炸特效

今天要分享的这款 HTML5 3D 动画特效非常给力，它是一个基于Canvas 的倒计时爆炸效果，随着时间的走动，时间数字傍边就会有爆炸的特效，一群像素点就会在数字中心爆发出来，感觉非常酷。而且应用了 HTML5 的 3D 特性，让整一个时钟显得非常有立体感。

在线演示        源码下载

以上就是7款让人惊叹的HTML5粒子动画特效，希望你会喜欢。