惊艳！9个不可思议的 HTML5 Canvas 应用试验
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
这是演示绚丽得难以形容。此演示的动画的颜色，位置，连接线，和不透明度，所有的动画都很光滑....这是真的很光滑。惊叹！
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 应用试验的更多相关文章
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- HTML5 Canvas 实现的9个 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
- HTML5 Canvas 高仿逼真 3D 布料图案效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...
- 经典！HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
- Aristochart – 灵活的 HTML5 Canvas 折线图
Aristochart 是基于 HTML5 Canvas 的折线图功能库,具有高定制性和灵活性的特点.Aristochart 会帮助你处理图形显示,让你能够专注于业务逻辑处理. 您可能感兴趣的相关文章 ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- ( 转 )超级惊艳 10款HTML5动画特效推荐
今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQu ...
- 分享10款效果惊艳的HTML5图片特效
在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...
- 超级惊艳 10款HTML5动画特效推荐[转]
ylbtech_html5_demo 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,现 ...
随机推荐
- 有关stm32的问题，程序里面的u8、u16这些是什么意思啊
u8 是 unsigned charu16 是 unsigned shortu32 是 unsigned int
- mysql 一些命令
show processlist; 查看服务进程列表show engines; 所有提供的引擎show variables like '%storage_engine%'; 当前默认的存储引擎show ...
- 快速排序（python实现）
算法导论上的快速排序采用分治算法,步骤如下: 1.选取一个数字作为基准,可选取末位数字 2.将数列第一位开始,依次与此数字比较,如果小于此数,将小数交换到左边,最后达到小于基准数的在左边,大于基准数的 ...
- 一维码：EAN-13码的识别
1.一维码简述: 一维条码是一种能用于信息编码和信息自动识别的标准符号,是由一组宽度不同的黑白符号按一定规则交替排列编码组成的图形符号,用于表示一定的信息. 码制指条码符号的类型,不同的类型有不同的编 ...
- 【Python数据分析】Python3操作Excel-以豆瓣图书Top250为例
本文利用Python3爬虫抓取豆瓣图书Top250,并利用xlwt模块将其存储至excel文件,图片下载到相应目录.旨在进行更多的爬虫实践练习以及模块学习. 工具 1.Python 3.5 2.Bea ...
- BZOJ 1061: [Noi2008]志愿者招募 [单纯形法]【学习笔记】
1061: [Noi2008]志愿者招募 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 3975 Solved: 2421[Submit][Stat ...
- 第三章Struts2 Action中动态方法调用、通配符的使用
01.Struts 2基本结构 使用Struts2框架实现用登录的功能,使用struts2标签和ognl表达式简化了试图的开发,并且利用struts2提供的特性对输入的数据进行验证,以及访问Servl ...
- AC日记——约瑟夫问题 codevs 1282
1282 约瑟夫问题 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题解 查看运行结果 题目描述 Description 有编号从1到N的N个小 ...
- mysql表复制和修改部分字段
今天在工作中,需要造大量的加数据,1000多条数据如果都是手工输入的话,那么我今天不要干别的了,就造吧! 当时手工操作重复的事情,对程序员来说,是一件很丢人的事情,所以就上网查了一下,需要用到两个知识 ...
- ListIterator接口，双向输出。
1,ListIterator接口与Itreator接口的区别. 2,使用限制. 定义如下: public interface ListIterator<E>extends Iterator ...