如今,HTML5 可谓如众星捧月一般,受到众多业内巨头的青睐。很多 Web 开发者也尝试着用 HTML5 来制作各种 Web 应用。HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大。今天这篇文章收集了20个惊艳的 HTML5 Canvas 应用试验推荐给大家。
01. Cloth Simulation
使用 Canvas 模仿的3D布料图案效果。
02. Particle System
这是我最喜欢的一个,非常神奇的效果!
![](https://yqfile.alicdn.com/img_a4b7fc33e5f75cf1d6b90485c3203f75.jpg?x-oss-process=image/resize,w_1400/format,webp)
03. Cloth Experiment
另外一个非常惊艳的布料模仿使用,拖动布料试试看!
![](https://yqfile.alicdn.com/img_a7f4bf21d8d26e9c0330ec9d7bf1c1b1.jpg?x-oss-process=image/resize,w_1400/format,webp)
04. Strange Attractors
使用 Canvas 绘制的非常精美的分形(fractals)效果。
![](https://yqfile.alicdn.com/img_78b644eb968e435683f6000b1090f4d2.jpg?x-oss-process=image/resize,w_1400/format,webp)
06. Canvas Nebula
使用 Canvas 绘制的星云图。
![](https://yqfile.alicdn.com/img_c91753c49d99c94d5e98251348e34a3d.jpg?x-oss-process=image/resize,w_1400/format,webp)
07. Bomomo
HTML5 Cavas 制作的画板,有各种各样的画刷。
![](https://yqfile.alicdn.com/img_cf9334155c1e8820a7f5d077fff1579e.jpg?x-oss-process=image/resize,w_1400/format,webp)
08. Liquid Particles
多彩的流动颗粒。
![](https://yqfile.alicdn.com/img_39f6586a730d6fcea3f0d94e1c07faf8.jpg?x-oss-process=image/resize,w_1400/format,webp)
09. Fake Floor Reflections
非常立体的倒影效果。
![](https://yqfile.alicdn.com/img_ad37063e4ba434887d289b22ad5d0efa.jpg?x-oss-process=image/resize,w_1400/format,webp)
10. Sinous
一个非常有趣的游戏,没有想象的那么容易玩。
![](https://yqfile.alicdn.com/img_fe094a79e8fde076ef93a2193c4981c7.jpg?x-oss-process=image/resize,w_1400/format,webp)
11. Water in HTML5
HTML5 Canvas 模拟的水!
![](https://yqfile.alicdn.com/img_40f581126746a0da39ec8814ebf6c78d.jpg?x-oss-process=image/resize,w_1400/format,webp)
12. Blob
水滴效果。
13. Magnetic System
模拟的磁场效果。
![](https://yqfile.alicdn.com/img_cbd06a11d8ba13cd442316677de44e0a.jpg?x-oss-process=image/resize,w_1400/format,webp)
14. Trail
多彩的轨迹。
![](https://yqfile.alicdn.com/img_18583b42e7e19bafbc743d53cbb78f71.jpg?x-oss-process=image/resize,w_1400/format,webp)
15. Particles
粒子系统。
![](https://yqfile.alicdn.com/img_c3044ef8b409f1cf358d33a2a0b9951a.jpg?x-oss-process=image/resize,w_1400/format,webp)
16. Shattering Box Physics Simulation
模拟现实世界的物理动作,难以置信的逼真。
![](https://yqfile.alicdn.com/img_3862a73eec06ee08e5cb57828b68da30.jpg?x-oss-process=image/resize,w_1400/format,webp)
17. Flower Power
美丽的花!
![](https://yqfile.alicdn.com/img_b29c2565539cb041126d3a9a85504bef.jpg?x-oss-process=image/resize,w_1400/format,webp)
18. 9Elements Particle Play
这个实验演示了 audio 和 canvas 标签的应用。
![](https://yqfile.alicdn.com/img_1e2cca942174564c089e87baf5b00f40.jpg?x-oss-process=image/resize,w_1400/format,webp)
19. Beauty of Maths
数学之美!
![](https://yqfile.alicdn.com/img_2fe4bfb6e665406388aa98d2c524ef6a.jpg?x-oss-process=image/resize,w_1400/format,webp)
20. Tree
Canvas 绘制的树。
![](https://yqfile.alicdn.com/img_6496597a1905d6e049d2b3648befa62e.jpg?x-oss-process=image/resize,w_1400/format,webp)
您可能还喜欢
- 九个让人难以置信的HTML5和JavaScript实验
- 让人眼花缭乱的 HTML5 和 JavaScript 效果
- 推荐18个基于 HTML 5 Canvas 开发的图表库
- 29款基于 HTML5 Canvas 开发的网页游戏
- 五大主流浏览器 CSS3 和 HTML5 兼容性大比拼
国际来源:21 Impressive HTML5 Canvas Experiments
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
本文出处【http://www.cnblogs.com/lhb25/】
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。