HTML5呈现了很多的新特性，这在之前的HTML中是不可见到的。其中一个最值得提及的特性就是HTML Canvas，可以对2D或位图进行动态、脚本的渲染。
今天，我们收集了15个优秀的canvas应用，每个开发者都应该知道。
1. SketchPad
Sketchpad 是个优秀的 HTML5 应用，帮助我们创建有用的绘图应用，使用JS和canvas元素。Sketchpad 的绘图工具具有丰富的功能。
sketchpad
2. Canvas Color Cycling
具有下雨、下雪、海浪、烟雾的效果。
canvas color cycling
3. Threshold Filter
将图片转换为高对比度的黑白照片。
threshold filter
4. Reflections
3D旋转效果。
reflections
5. 3D Planet Viewer
3D Planet Viewer 渲染效果，来自NASA WorldWind WMS 服务器的数据，可以进行旋转、缩放等操作。
planel-viewer
6. Music Visualisation with SoundManager2
Jacob Seidelin 创建，使用canvas 元素和SoundManager2创建的音乐可视化演示。
musicvisualisation
7. Water Ripples
Almer Thie 创建的实时交互的水波纹效果。
water ripple
8. Strange Attraction
Strange Attractor 提供各种选项，改变输出效果。
strange-attraction
9. CloudKick
Cloudkick Viz 使用 canvas 元素来显示云服务器的实时监控信息。
cloudkick
10. Liquid Particles
Daniel Puhe 创建了这个有趣的液体运动粒子演示。只要移动你的鼠标在周围的粒子将跟随光标。
liquid particles
11. Canvas Sphere
复杂的球体效果。
canvas sphere
12. jTenorian
256个LED按钮的表面，呈现的是描述不出来的效果。
jtenorian
13. Dynamic Image Collage
Dynamic Image Collage 使用canvas元素创建。
dynamic collage
14. iGrapher
iGrapher 是个免费的基于web的金融市场可视化工具，包括股市、汇率和商品市场的图表、分析和预测。
igrapher
15. Tiler 3D
Tiler 3D 呈现3D旋转网格的不限数量的同等尺寸的图片。
tiler-3d
本站文章除注明转载外，均为本站原创或编译
欢迎任何形式的转载，但请务必注明出处，尊重他人劳动共创开源社区
转载请注明：文章转载自：开源中国社区 [http://www.oschina.net]
本文标题：15 个 HTML5 Canvas 应用欣赏
本文地址：http://www.oschina.net/news/19813/15-html5-canvas-applications
分享到：
相关推荐
在这个“html5 canvas彩色烟花粒子动画特效”项目中，开发者利用Canvas API创建了一个互动式的烟花秀，用户不仅可以欣赏到五彩斑斓的烟花绽放，还能通过右上角的设置调整动画参数，甚至通过鼠标点击触发新的烟花。...
可以创造出很多不同凡响的特效应用，尤其是3D动画更是轻而易举，大家可以在之前我们分享的HTML5动画栏目下欣赏到很多超酷的HTML5动画，也可以在HTML5 Canvas栏目下学习HTML5 Canvas应用的方法。今天要分享的这款...
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上绘制矢量图形、动画和交互式内容。这个“HTML5 Canvas扑克牌花式发牌动画特效”是一个利用Canvas API实现的创新示例，展示了如何通过JavaScript编程技巧...
总的来说，"点击夜空欣赏烟花"这款HTML5微信小游戏展示了HTML5、CSS3和JavaScript的结合应用，通过这些技术，开发者可以创造出富有吸引力和交互性的轻量级游戏，给用户带来便捷且愉快的娱乐体验。
分析一个使用jQuery UI和HTML5开发的实际游戏案例，如一个基于Canvas的物理弹球游戏，解释如何结合两者实现碰撞检测、动画效果和用户交互。 10. **学习路径**： 对于想要学习这个领域的开发者，推荐学习jQuery和...
4. **离线存储**: HTML5的AppCache（应用程序缓存）功能允许网页在离线状态下也能访问，这对于创建动态logo来说尤其有用，用户即使在网络不稳定的情况下也能欣赏到完整的视觉效果。 5. **CSS3**: 虽然主要讨论的是...
综上所述，"超炫酷前端特效html5白云飞翔"是一个集HTML5结构化元素、多媒体支持、Canvas图形绘制和JavaScript交互性于一体的优秀示例，充分展示了HTML5在现代前端开发中的创新与实用性。通过学习和研究这个项目，...
在这个“HTML5爱心表白动画”项目中，我们可以看到HTML5的强大魅力是如何被巧妙地应用于情感表达的。 首先，让我们谈谈HTML5的核心元素——`<canvas>`。这个元素提供了在浏览器上进行动态图形绘制的能力，是创建...
通过这个项目，开发者不仅可以学习到HTML5 Canvas和JavaScript的基本用法，还能深入理解如何利用这些技术创造艺术效果，并将其应用于实际产品中。同时，对于用户来说，这是一个可以定制和享受视觉艺术的新方式。
在这个例子中，可能有一个`<canvas>`元素，它是HTML5中的一个关键组件，用于绘制2D或3D图形。`canvas`将被JavaScript用来动态渲染雪花的运动轨迹。 接着，`css`文件夹可能包含一个或多个CSS样式表，用于定义页面的...
油画色彩的Html5网站模板充分利用了Html5的Canvas元素，通过JavaScript实现动态的油画效果。Canvas是一个二维绘图表面，允许开发者通过编程的方式绘制图形，包括线条、形状、图像等。在这款模板中，Canvas被用来模拟...
HTML5是一种强大的网页开发语言，它在Web应用领域中扮演着至关重要的角色。这款"HTML5流星雨动画背景特效"是利用HTML5的Canvas元素，结合JavaScript编程来实现的一种动态视觉效果，为网页添加了独特的视觉吸引力。...
这也是利用HTML5 Canvas API的一个创意应用，通过不断在Canvas上绘制随机落下的线条，模拟出电子雨滴下落的场景。这种效果可以让人联想到科幻电影中的未来感，或者雨滴打在屏幕上的真实感受。同样，只需浏览器打开...
综上所述，`imgplay`是利用HTML5 `canvas`和jQuery库实现的一个高效、易用的图片序列播放插件，为开发者提供了强大的图片动画展示工具，广泛应用于多种Web场景。通过理解和掌握这个插件的使用，可以提升网站的互动性...
首先，HTML5引入了`<canvas>`元素，这是一个可编程的图形画布，允许开发者通过JavaScript来绘制动态图形。在这个月球旋转动画中，`<canvas>`元素就是舞台，所有的图形渲染都在这里进行。开发者可以通过`canvas` API...
在这个案例中，`index.html`文件中可能包含一个`<canvas>`元素，它是HTML5提供的一个画布，我们可以在这个画布上用JavaScript绘制图形。`<canvas>`元素可以被视为一个二维的绘图表面，允许开发者用JavaScript进行...
总之，“微信HTML5在线朋友圈游戏源码带安装部署教程-点击夜空欣赏烟花”提供了一个学习和实践HTML5、JavaScript以及微信小游戏开发的宝贵机会。通过这个项目，您可以深入理解网页游戏的开发流程，同时也能掌握在...
网页的主题思想是宣传河南理工大学，包括主页、学校介绍、图片欣赏、学院设置和联系我们等几个部分。 我们的设计思路是： * 确定网站主题和搜集材料 * 规划网站的结构和栏目设置 * 选择合适的制作工具，如 Adobe ...