HTML5 <canvas> 元素给网页中的视觉展示带来了革命性的变化。Canvas 能够实现各种让人惊叹的视觉效果和高效的动画,在这以前是需要 Flash 支持或者 JavaScript 才能实现的。HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,功能强大。今天这篇文章向大家展示9个让人难以置信的 HTML5 Canvas 应用演示。

您可能感兴趣的相关文章

1.  HTML5 Video Destruction

这是一个真正抢眼的 Canvas 演示,我必须顶礼膜拜。你会看到一个可扩展的画布视频,点击视频片爆炸,但视频爆炸过程中继续播放,并能够自动回到其原来的位置。这是一个让我们所有的人都振奋的演示。

2.  Zen Photon Garden

这个史诗般的 Canvas 应用演示可以在画布上绘制活性光流,从而使用户能够看到他们的新线条组成的光流效果。更妙的是,这个演示可以让您保存和加载输出。

3.  Tear-able Cloth

这是一个流畅的模拟可撕裂布料效果的演示。你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果。

4.  Particles

这是演示绚丽得难以形容。此演示的动画的颜色,位置,连接线,和不透明度,所有的动画都很光滑....这是真的很光滑。惊叹!

效果演示

5.  30,000 Particles

30K颗粒演示包含了一些非常可怕的东西:圆形(半径),动画爆炸和返回粒子,和鼠标监听器,允许用户控制爆炸。一个很好的交互性和逻辑的例子。

 

6.  Motion Graphic Typeface

这个效果太惊异了,每个字母由不同的图像数据。我可以说的是这个动画绝对令人兴奋的,你看到文字效果取决于您的鼠标位置。

7.  Motion Graphic Typeface II

如果前一个演示还不够深刻,那么这个相信能够打动你。不仅是文字动画,还是一个令人难以置信的颜色模糊动画。这个演示是真正的超凡脱俗。

8.  Canvas Rider

HTML5 Canvas 的应用当然少不了游戏,可以说是网页游戏的未来,火狐 OS 将很快证明。这个辉煌而又简单的自行车比赛表明,Canvas 已经准备好迎来黄金季节。

9.  Gestures + Reveal.JS

这个演示使用您的设备的摄像头和麦克风实现基于手势的移动立方体的数据。如果你有一台 MacBook Pro 的,你应该尝试这一点。

您可能感兴趣的相关文章

文本链接:未来的Web:九个不可思议的 HTML5 Canvas 应用试验

文章来源:梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

惊艳!9个不可思议的 HTML5 Canvas 应用试验的更多相关文章

  1. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  2. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

  3. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

  4. 经典!HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  5. Aristochart – 灵活的 HTML5 Canvas 折线图

    Aristochart 是基于 HTML5 Canvas 的折线图功能库,具有高定制性和灵活性的特点.Aristochart 会帮助你处理图形显示,让你能够专注于业务逻辑处理. 您可能感兴趣的相关文章 ...

  6. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  7. ( 转 )超级惊艳 10款HTML5动画特效推荐

    今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQu ...

  8. 分享10款效果惊艳的HTML5图片特效

    在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...

  9. 超级惊艳 10款HTML5动画特效推荐[转]

    ylbtech_html5_demo 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,现 ...

随机推荐

  1. [WPF系列]基础Combox

    示例     参考 WPF combobox SelectedValue binding to string Confused with wpf ComboBox DisplayMemberPath, ...

  2. java设计模式之组合模式

    组合模式 组合模式,将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性.掌握组合模式的重点是要理解清楚 “部分/整体” 还有 ”单个对象“ 与 & ...

  3. java设计模式之状态模式

    状态模式 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 状态模式UML图 上下文环境(Context):它定义了客户程序需要的接口并维护一个具体状态角色的实例,将与状态相关 ...

  4. 【2016-11-2】【坚持学习】【Day17】【通过反射自动将datareader转为实体info】

    通过ADO.net 查询到数据库的数据后,通过DataReader转为对象Info public class BaseInfo { /// <summary> /// 填充实体 /// & ...

  5. 蓝牙BLE传输性能及延迟分析

    BLE传输性能主要受以下几个因素影响:操作类型,Connection Interval,每个Connection Event内发送的帧数.每一帧数据的长度.具体参见如下链接: https://devz ...

  6. VR(虚拟现实)开发资源汇总

    Daydream https://developers.google.cn googlevr Google VR for Android GVR SDK and NDK Release Notes c ...

  7. 发一份shiro标准配置,特此记录

    主要还是整合了本地ehcache,集群session管理过段时间放出 <?xml version="1.0" encoding="UTF-8"?> ...

  8. NYOJ 743

    复杂度 描述 for(i=1;i<=n;i++) for(j=i+1;j<=n;j++) for(k=j+1;k<=n;k++) operation; 你知道 operation 共 ...

  9. 操作系统IO模型

    操作系统IO模型 声明:如下内容是根据APUE和mycat两本著作中关于I/O模式的一些内容加上自己的一些理解整理而成,仅供学习使用. 本节内容 UNIX下可用的五种I/O模型 三种I/O模型 Rea ...

  10. MD测试

    # 欢迎使用 Cmd - 在线 Markdown 编辑阅读器 ------ 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,**Cmd Markdown** 是 ...