如今,HTML5 可谓如众星捧月一般,受到众多业内巨头的青睐。很多 Web 开发者也尝试着用 HTML5 来制作各种 Web 应用。HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大。今天这篇文章收集了20个惊艳的 HTML5 Canvas 应用试验推荐给大家。
01. Cloth Simulation
使用 Canvas 模仿的3D布料图案效果。
02. Particle System
这是我最喜欢的一个,非常神奇的效果!
![](http://images.cnitblog.com/i/36987/201405/061609343239612.jpg)
03. Cloth Experiment
另外一个非常惊艳的布料模仿使用,拖动布料试试看!
![](http://images.cnitblog.com/i/36987/201405/061609417298875.jpg)
04. Strange Attractors
使用 Canvas 绘制的非常精美的分形(fractals)效果。
![](http://images.cnitblog.com/i/36987/201405/061609484179051.jpg)
06. Canvas Nebula
使用 Canvas 绘制的星云图。
![](http://images.cnitblog.com/i/36987/201405/061610298385641.jpg)
07. Bomomo
HTML5 Cavas 制作的画板,有各种各样的画刷。
![](http://images.cnitblog.com/i/36987/201405/061610432131694.jpg)
08. Liquid Particles
多彩的流动颗粒。
![](http://images.cnitblog.com/i/36987/201405/061610515579642.jpg)
09. Fake Floor Reflections
非常立体的倒影效果。
![](http://images.cnitblog.com/i/36987/201405/061610575423203.jpg)
10. Sinous
一个非常有趣的游戏,没有想象的那么容易玩。
![](http://images.cnitblog.com/i/36987/201405/061611036351966.jpg)
11. Water in HTML5
HTML5 Canvas 模拟的水!
![](http://images.cnitblog.com/i/36987/201405/061611467297397.jpg)
12. Blob
水滴效果。
13. Magnetic System
模拟的磁场效果。
![](http://images.cnitblog.com/i/36987/201405/061611596984392.jpg)
14. Trail
多彩的轨迹。
![](http://images.cnitblog.com/i/36987/201405/061612060265226.jpg)
15. Particles
粒子系统。
![](http://images.cnitblog.com/i/36987/201405/061612114631388.jpg)
16. Shattering Box Physics Simulation
模拟现实世界的物理动作,难以置信的逼真。
![](http://images.cnitblog.com/i/36987/201405/061612497921029.jpg)
17. Flower Power
美丽的花!
![](http://images.cnitblog.com/i/36987/201405/061612575731107.jpg)
18. 9Elements Particle Play
这个实验演示了 audio 和 canvas 标签的应用。
![](http://images.cnitblog.com/i/36987/201405/061613032609811.jpg)
19. Beauty of Maths
数学之美!
![](http://images.cnitblog.com/i/36987/201405/061613092761616.jpg)
20. Tree
Canvas 绘制的树。
![](https://i-blog.csdnimg.cn/blog_migrate/bdafd47af1cfe34a80677958ae2df1fa.jpeg)
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粒子动画特效,希望你会喜欢。