文档章节

惊艳!9个不可思议的 HTML5 Canvas 应用试验

颖辉小居
 颖辉小居
发布于 2017/10/19 11:36
字数 613
阅读 55
收藏 2

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 的,你应该尝试这一点。

效果演示

  

本文转载自:http://www.cnblogs.com/lhb25/p/html5-canvas-demos.html

颖辉小居

颖辉小居

粉丝 35
博文 192
码字总数 81004
作品 0
东城
高级程序员
私信 提问
分享10款效果惊艳的HTML5图片特效

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

ruby_chen
2014/03/26
4.3K
1
分享28本关于HTML5的学习书籍(免费下载)

分享28本关于HTML5的学习书籍(免费下载) 1、用HTML5新特性开发移动App 2、用HTML5CSS3实现媲美原生应用的交互体验 3、改善HTML5网页性能-译 4、WEB_HTML5在LBS社区中的应用 5、WebQQ_3.0:...

邓剑彬
2012/11/30
1K
6
HTML5 面试中最常问到的 10 个问题

1. HTML5 新的 DocType 和 Charset 是什么? HTML5 现在已经不是 SGML 的子集,DocType 简化为: HTML 5 指定 UTF-8 编码的方式如下: 2. 如何在 HTML5 页面中嵌入音频? HTML 5 包含嵌入音频...

oschina
2013/10/11
12.1K
17
25 个超棒的 HTML5 & JavaScript 游戏引擎开发库

就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议。游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实、吸引人眼球。游戏引擎负责其余的事情。早期,游戏开发者通常从草图做...

oschina
2015/02/26
11.4K
44
再来 10 个新鲜的 HTML5 教程

HTML5 火吗?看看 oschina 三天两头的 xx 个 xxx 就知道了。本文为你推荐最新的 10 个 HTML5 相关的教程,或许能启发你项目中的思路。 1. HTML5 canvas – Creating own Paint program Canva...

红薯
2011/11/15
3.9K
4

没有更多内容

加载失败,请刷新页面

加载更多

基础工具类

package com.atguigu.util;import java.sql.Connection;import java.sql.SQLException;import java.util.Properties;import javax.sql.DataSource;import com.alibaba.druid......

architect刘源源
22分钟前
25
0
P30 Pro劲敌!DxO官宣新机:排行榜又要变

5月26日晚间,DxOMark官方推特预告,将在5月27日公布一款新机型的DxOMark评分,猜猜是哪款? 网友猜想的机型有:红米K20、谷歌Pixel 3a、索尼Xperia 1、诺基亚9 PureView等。 DxOMark即将公布...

linux-tao
昨天
6
0
Ubuntu18.04.2窗口过小不能自适应(二次转载)

解决Ubuntu在虚拟机窗口不能自适应 2018年09月06日 16:20:08 起不了名儿 阅读数 855 此博文转载:https://blog.csdn.net/nuddlle/article/details/77994080(原地址) 试了很多办法这个好用 ...

tahiti_aa
昨天
2
0
死磕 java同步系列之CountDownLatch源码解析

问题 (1)CountDownLatch是什么? (2)CountDownLatch具有哪些特性? (3)CountDownLatch通常运用在什么场景中? (4)CountDownLatch的初始次数是否可以调整? 简介 CountDownLatch,可以...

彤哥读源码
昨天
4
0
Nginx提供下载apk服务

有时候我们可能需要提供文件或者其他apk下载链接,通过 nginx 配置可以很简单地实现。 server {    listen 80;    server_name download.xxx.com;    root app;    locati...

Jack088
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部