走进 HTML5:20个惊艳的 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 绘制的树。

时间: 2024-09-22 02:26:14

走进 HTML5:20个惊艳的 HTML5 Canvas 应用试验(转)的相关文章

20个惊艳的网页导航赏析

  简洁高效的导航菜单设计,能够有效优化搜索,改善用户体验.今天,我们将研究一些网页导航设计方案.这些案例新颖夺目,生动有趣,原创前卫,令人过目难忘.其中有些设计的复杂程度更将超乎你想象. 推选这些案例,不光是因为这些创意的原创性,还有包含其中的先进设计技巧,可以启发灵感,帮助大家对网页导航设计领域有更多的认知和了解.你可以点击图片到该网站看看- 01 Jova Jova的导航菜单干净.整洁.均衡且布局得当.细直线条,网格布局,黑白配色方案以及清新醒目的排版,拼出了几何韵味十足的优雅界面.浅色的

20款效果惊艳的产品宣传网站

  比起纯粹的商务网站,设计师会更青睐允许自由发挥创意的项目.从网页设计的角度上来说,"普通"的网站也正是需要借助创意来脱颖而出,尤其是产品宣传网站,更是有足够的空间来供设计师来发挥他们的狂拽酷炫的创意.实际上如果你正在寻求网站设计创意灵感的话,那么这些宣传网站正是你需要的. 接下来我们要推荐的20个宣传网站中,既有精致的产品宣传页,也有氛围营造得恰如其分的活动宣传页,还有几个创意爆棚的个人宣传网站.这些网站无一不是设计精美的典范,更重要的是其中包含了设计师精心设计的交互和动效.如果你

【V直播】三专家解读波士顿动力Atlas惊艳后空翻7大技术难点

会后空翻的波士顿动力Atals机器人 三位嘉宾分别是: 段晋军,东南大学博士生,2015年9月-2016年9月在新加坡南洋理工大学访学.研究方向是多机器人协作.基于阻抗模型的灵巧双臂位置力协调控制.增强学习等. 孙广彬,东北大学工学博士,研究方向为多臂.多足机器人智能运动规划.控制及人机协作.2010年9月至2012年9月在卡耐基梅隆大学交流访问,2015年11月至2017年2月在新加坡南洋理工大学从事博士后研究. 梁聪慧,目前是新加坡科技研究局先进制造与技术中心的高级科学家,是一名经验丰富的机

Html5 学习系列(二)HTML5新增结构标签

引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构标签 HTML5时代的召唤 上一代的HTML的标准: HTML 4.01 和 XHTML 1.0 距离今天已经发布了10多年了,而Web端的应用也已经翻天覆地的变换.而且Web前端没有一个统一的通用的互联网标准,各个浏览器间拥有太多的不兼容,在维护这些浏览器兼容性浪费了太多的时间.再有就是之前的多媒

10个惊艳的 CoffeeScript 单行代码

10个惊艳的 CoffeeScript 单行代码 你可能已经读过Marcus Kazmierczak博客中的<10 Scala One Liners to Impress Your Friends>.虽然我不懂Scala(以及Java),但是它看上去真心不错,所以我决定也要惊艳我的朋友一番--人家从Java到Scala,我从Javascript到CoffeeScript.假设所有例子使用node.js作为环境. [译者注]:译者对CoffeeScript不太了解,只是觉得这种单行代码还挺有艺术

10 个惊艳的 CoffeeScript 单行代码

可能已经读过Marcus Kazmierczak博客中的<10 Scala One Liners to Impress Your Friends>.虽然我不懂Scala(以及Java),但是它看上去真心不错,所以我决定也要惊艳我的朋友一番--人家从Java到Scala,我从Javascript到CoffeeScript.假设所有例子使用node.js作为环境. [译者注]:译者对CoffeeScript不太了解,只是觉得这种单行代码还挺有艺术感的,于是粗糙地翻译出来分享给大家,有不对的地方还请

林志玲罗马惊艳写真与温丝莱特PK东西方魅力

艾西瓦娅-雷.凯特-温丝莱特和林志玲(1/21张) 2010年9月10日,在罗马宣传代言的品牌表新款系列的林志玲,继9月8日优雅亮相后,当地时间9月9日再度和奥斯卡影后凯特·温丝莱特(Kate Winslet).印度女星艾西瓦娅·雷(Aishwarya Rai)站台争妍斗艳.三人拍摄写真时的花絮照也 曝光. 三人礼服款式各不相同,林志玲以高贵的紫色抹胸裙子亮相惊艳四射,露出雪白的香肩娇嫩欲滴,拍照时微微露笑散发出迷人的东方气质.白嫩温丝莱特则为彰显成熟魅力的黑色双肩裙,艾西瓦娅穿的是裸色单肩裙,

“惊艳·夺慕 酷派大观8730线下体验会”举办

2013年1月26日下午,宇龙酷派公司与手机中国联合在北京新七天咖啡厅举行了"惊艳·夺慕 酷派大观8730线下体验会".笔者也于中午赶到了体验会现场,当时已经陆续有网友签到,主办方也专门为大家准备了小点心.水果和饮料. 作为国内知名品牌,酷派刚刚过完20周岁生日.在这20年中,它推出了众多经典的产品,无论在销量还是http://www.aliyun.com/zixun/aggregation/32063.html">市场占有率方面都有着不俗的表现.同时,凭着出众的品质和

霍思燕走秀与神秘男热聊红唇惊艳大秀玉背

霍思燕大摆pose(1/9张) 2010年10月9日讯,北京,电影<绝命岛>全球首映仪式10月9日举行.霍思燕身穿烈焰红裙亮相首映礼.刚落座的霍思燕就与身旁的男嘉宾寒暄起来,男嘉宾还紧握霍思燕的玉手不放.男演员戎祥现场表现的相当绅士,不仅扶这霍思燕上台,下台的时候还一直陪着霍思燕回到座位.韩国演员韩素媛也现身首映仪式. 主创刘桦.霍思燕.林雪.戎祥等明星与导演冯超一一亮相."绝命岛"美女如云,霍思燕.余淼.陈飞羽三位美女.功夫了得的女杀手陈飞羽,也弃武从文,现场演唱了个性天