八大疯狂的HTML5 Canvas及WebGL动画效果

标签： HTML5学习资源 | 发表时间：2012-03-14 09:45 | 作者：admin
出处：http://www.mhtml5.com

HTML5、WebGL和JavaScript改变了长久以来的动画制作行业。在过去的几年中，我们想要制作卓越的网页动画只能使用Flash和Java Applet。而现在，使用脚本语言和渲染器在浏览器中实现疯狂的动画效果已经成为可能。究其原因，大概有以下几点：

  • 处理器的性能越来越高。我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果。
  • 现在浏览器和web技术的不断发展。浏览器如Firefox、Chrome、Safari和IE10，web技术如Canvas、SVG和WebGL。
  • 网速越来越快。一些体验需要实时数据流和预加载资源，更好的网络状况能有更好的体验。

我们挑选了8个由WebGL、HTML5 Canvas和Javascript制作的绝妙效果。每一个都非常简单但却发人深省，疯狂并且极具创意。

黏糊糊的东西

用鼠标拖拽，然后扔出去，就会粘在网页边缘。

粒子动画

使用浮点纹理和FBO来实现的动画，由粒子组成一匹奔跑的骏马。

三维液体

用3D的方式呈现经典的2D水面效果算法。

章鱼

WebGL和Three.js制作的漂亮的章鱼状的星空动画

蠕虫

HTML5 Canvas制作的效果，无数条蠕虫根据灰度组成图片，你还可以拖拽一张本地图片到右侧。

疯狂的触角

随机视觉

Conductor

将纽约地铁系统变成可以弹奏的弦乐器。

 

原文地址： http://favbulous.com/post/895/8-crazy-animations-withwebgl-and-html5-canvas

来源： HIWEBGL

 

相关 [八大 疯狂 html5] 推荐：

八大疯狂的HTML5 Canvas及WebGL动画效果

- - HTML5研究小组
HTML5、WebGL和JavaScript改变了长久以来的动画制作行业. 在过去的几年中，我们想要制作卓越的网页动画只能使用Flash和Java Applet. 而现在，使用脚本语言和渲染器在浏览器中实现疯狂的动画效果已经成为可能. 我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果. 现在浏览器和web技术的不断发展.

新浪微游戏首现独立的HTML5模拟经营类游戏《疯狂老板》

- - HTML5研究小组
微游戏是基于新浪微博平台的好友关系及互动而推出的一系列游戏. 目前微游戏中基本都是Flash游戏为主，而鲜少有真正更适合微博平台的随时随地性的HTML5游戏. 2011年8月，《愤怒的小鸟》开发商Rovio首先开发出该游戏的HTML5版. 随后，社交游戏巨头Zynga也发布了三款适用于苹果产品的HTML5游戏.

疯狂的黄庄

- -
每到周末，海淀剧院门口的知春路总会堵车. 原本的双车道只剩下一条，因为外侧车道完全成了停车场. 一辆辆等候在路边的私家车上，背书包戴眼镜的学生们行色匆匆，出入于各个课外班. 拥堵最严重的银网中心，同时也是课外机构的大本营. 这里驻扎着新东方、学而思、立思辰、高思、杰睿等数十家机构，上百间教室，几百张课桌.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样：十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息，甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面，主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

混搭Logo也疯狂[22p]

- mingelz - FeedzShare
来自: 煎蛋 - FeedzShare  . 发布时间:2011年08月03日,  已有 2 人推荐. Logo设计师Graham Smith显然是个酷爱恶搞的家伙——不然他也不会弄出这么多让人啼笑皆非的“混搭”Logo了. 想必如果这些Logo原型的主人们看到自己心爱的Logo跟宿敌品牌搞在一起，那不得是一口老血吐出来…….

贝多芬的疯狂

- Hellmester - 无聊哦
贝多芬的疯狂手指实在是太变态了…当年他是怎么弹的 《悲伤》 第三章，眼睛都看花了，他却弹的那么流畅~··. 推荐阅读：三岁指挥家指挥贝多芬《命运》. 查看原文  |  发表评论(17). © 疾风 for 无聊哦 | 原文链接 | 搞笑哦 | 淘宝网上卖疯了的东东. 订阅 无聊哦 http://feed.wuliaoo.com.

疯狂的小黄边

- Beardnan - 1416 教室
你想当一名美国国家地理杂志的摄影师. “你会浑身湿漉漉的，器材也许都会被毁掉”. “每天工作十到十四个小时，通常要连续干四五周一周干四到五天，直到累吐血. John Stanmever 在印度为国家地理工作，摄影Anil Chandra Roy 图片来源：John Stanmever博客. “为国家地理杂志拍一个故事是怎样的经历.