你的位置: iPc 首页 > 全部文章 > 软件相关 > 阅读文章
科学X网    Office    苹果中国    微软中国    VPS

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

23
三月

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

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

处理器的性能越来越高。我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果。

现在浏览器和web技术的不断发展。浏览器如Firefox、Chrome、Safari和IE10,web技术如Canvas、SVG和WebGL。

网速越来越快。一些体验需要实时数据流和预加载资源,更好的网络状况能有更好的体验。

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

黏糊糊的东西

八大疯狂的HTML5 Canvas及WebGL动画效果1 黏糊糊的东西

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

粒子动画

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

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

三维液体

八大疯狂的HTML5 Canvas及WebGL动画效果3 三维液体

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

章鱼

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

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

蠕虫

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

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

疯狂的触角

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

随机视觉

八大疯狂的HTML5 Canvas及WebGL动画效果7 随机视觉

Conductor

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

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

相关文章阅读

浏览器上疯狂的3D特效,那些给力的3D网点盘点
来势汹汹人类已经无法阻止3D网页了!本文告诉你如何构建3D网页新世界!

关于本文
各种回音
  1. 说: 回复他/她

    为什么我有好几个打不开?……

    • 说:

      浏览器版本?

    • 说:

      用360 啦?

    • 说:

      360……不想看见它……

    • 说:

      这都是HTML5的,你可以用firefox 或者google chrome

    • 说:

      有些用到webGL,不是所有显卡都支持

  2. 说: 回复他/她

    IE9无奈撸过。。

  3. 说: 回复他/她

    chrome打不开= +!

  4. 说: 回复他/她

    firefox无压力~还是宝石迷阵好玩

  5. 说: 回复他/她

    chrome 毫无压力,挺好玩的,喜欢蠕虫那个。Cool~

  6. 说: 回复他/她

    chrome 毫无压力,挺好玩的,喜欢蠕虫那

  7. 说: 回复他/她

    没有大的带宽,什么都是垃圾,等升级10mb吧

  8. 说: 回复他/她

    瓦力好有爱

  9. 说: 回复他/她

    求教,为什么我chrome和firefox都不动?版本都是最新的,到底缺了什么?

微博评论箱