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
分享到:
相关推荐
今天,我们收集了15个优秀的canvas应用,每个开发者都应该知道。1.SketchPadSketchpad是个优秀的HTML5应用,帮助我们创建有用的绘图应用,使用JS和canvas元素。Sketchpad的绘图工具具有丰富的功能。2....
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
html5 canvas 播放视频html5 canvas 播放视频
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
HTML5 <canvas> 标签定义跟随鼠标图形和数字自增效果。
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
《HTML5 Canvas核心技术》内的实例代码
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
《HTML5 Canvas 开发详解》第二版pdf 版
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
HTML5 canvas鼠标经过星星连线,鼠标经过星空可将星星一颗颗连成直线,形成星桥,页面背景有变色效果,整个画面相当唯美、炫酷
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
HTML5 Canvas基础教程,html5开发使用者使用
html5canvas操作图像
参考html5 canvas中文文档实现的贪吃蛇。
html5 canvas容器温度计特效 html5 canvas容器温度计特效
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效