>

让你惊叹不已的HTML5画布技术应用,Web开发者需知

- 编辑:澳门新葡亰平台游戏 -

让你惊叹不已的HTML5画布技术应用,Web开发者需知

Web开发者需知的15个HTML5画布应用

2011/07/18 · HTML5 · HTML5

下面介绍15个html5画布应用,这些图形方面的应用可以很好的帮助开发者。

1. SketchPad

Sketchpad 是一个优秀的HTML5应用 可以帮助用户用 Javascript 画布工具创建有用的画图应用. Sketchpad’s 画图工具有 笔刷,铅笔,填充,文字 也提供 spirographs, 常用的 shapes 和stamps.

澳门新葡亰平台游戏 1

2. Canvas Color Cycling

这个应用可以使用一些滤镜效果

澳门新葡亰平台游戏 2

3. Threshold Filter

可以把图片转化成高对比或黑白图片.

澳门新葡亰平台游戏 3

4. Reflections
可以用特别的纹理和阴影处理3D应用.

澳门新葡亰平台游戏 4

5. 3D Planet Viewer

可以查看美国航天局的图片,旋转或放大.

澳门新葡亰平台游戏 5

6. Music Visualisation with SoundManager2

这可能是第一个HTML5音乐可视化应用

澳门新葡亰平台游戏 6

7. Water Ripples

使用画布原始创建互动水纹效果

澳门新葡亰平台游戏 7

8. Strange Attraction

这是一个与众不同的demo,通过修改设置可以产生不同的效果

澳门新葡亰平台游戏 8

9. CloudKick

可以显示云端服务期的状态,cpu,内存使用状况等等。

澳门新葡亰平台游戏 9

10. Liquid Particles

这是一个有趣的液体demo,当你鼠标移动时元素会跟着你的鼠标走。

澳门新葡亰平台游戏 10

11. Canvas Sphere

由小球组成的3d球状体

澳门新葡亰平台游戏 11

12. jTenorian

当你点亮不同的按钮组合,会创作出不同的有趣的声音.

澳门新葡亰平台游戏 12

13. Dynamic Image Collage

这是一个有趣的在线的有趣的在线拼图,通过搜索找到图片,点击图片就会在画布上显示,组成有趣的拼图

澳门新葡亰平台游戏 13

14. iGrapher

iGrapher 是个免费的金融图表工具,可以显示股票等金融市场的走势图.

澳门新葡亰平台游戏 14

15. Tiler 3D

显示一个3d的图片幻灯片.

澳门新葡亰平台游戏 15

 

赞 收藏 评论

澳门新葡亰平台游戏 16

随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上。这些最新的网页技术究竟能给我们今后的浏览带来什么样的改变?

据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务。

下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已。当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果。但是,下面的这些演示只使用了现代浏览器里自带技术,完全不需要借助 Flash 或 Silverlight 之类的插件。这种技术门槛的降低必将给这些技术的普及繁荣创造不可或缺的前提保障。

但并非所有人都认为HTML5已经发展成熟。市场研究公司Forrester分析师杰弗里·哈蒙德(Jeffrey Hammond)上周发表报告称,“从长期来看,HTML5可能取代部分富互联网应用(以下简称“RIM”)平台,但现在还没有。HTML5将对Web应 用的开发产生重大影响,但它只是领先RIA平台的互补性而非替代性技术。”

  1. 风好大,吹乱我的发

皮尔格雷姆表示,β版IE 9、Safari、Chrome、火狐和Opera都在不同程度上支持HTML5,苹果iPhone和谷歌Android也支持HTML5的许多功能。尽 管并非全部HTML5功能都得到了浏览器支持,但许多主要功能都得到了支持,其中包括语义标签、表单、多媒体、地理位置和离线Web应用等。

澳门新葡亰平台游戏 17

皮尔格雷姆承认,浏览器厂商在HTML5支持的视频技术方面还存在分歧。Safari只支持H.264格式,火狐和Opera只支持Ogg Theora,Chrome同时支持这两种视频格式。微软当地时间周五发表博客文章称,IE 9将只支持H.264,这意味着IE 9不支持Ogg Theora。

这是我最喜欢的一样演示,因为里面有一个很可爱的小女孩,似乎是有了人气就更能让人动心。如果你也喜欢这个小女孩,那就移动你的鼠标,让风从各个方向吹动它的头发。

谷歌在iPhone和Android版搜索应用中使用了地理位置功能,Twitter也使用了该功能。另外,谷歌在iPhone版Gmail应 用中使用了离线Web应用功能。

→ 观看演示

皮尔格雷姆表示,Web开发者应当开始学习HTML5的新功能

  1. 撕扯布单

爱创课堂-专业的前端HTML5培训机构

澳门新葡亰平台游戏 18

  爱创课堂秉承纯干货,不忽悠的态度专注前端培训,让每个零基础的学员都能真正的从入门到精通。

撕扯布单的这个演示在过去的几个月里成为了互联网上的大明星。用你的鼠标在这个网状布单上拖拽,你会发现它动画效果非常的顺滑,而完成这些效果的只是一小段代码,想必它已经让你惊叹不已。然而,不仅这些,这个动画还能响应你的拖拽的力度和速度,根据不同的力道,表现出不同的撕扯破坏效果,够神奇吧,完美的HTML5画布功能的体现。

  想要学习前端的朋友们可以点击“↑”上面的字哦

→ 观看演示

澳门新葡亰平台游戏 19

  1. 幻影文字

澳门新葡亰平台游戏 20

这个演示更为复杂。在使用了大量计算后,作者为我们呈现了一个高度复杂的动画。你能从画面上看到 Helvetica字母不停的蠕动和变化,分解和重组,你还可以使用鼠标来改变视角。由于完全使用现代浏览器的自带技术,这个演示在相对老旧的硬件上也能完美呈现。

→ 观看演示

  1. 佛光普照

澳门新葡亰平台游戏 21

这个演示可以称做HTML5画布(canvas)技术应用的典型代表。演示中,你可以通过划线来改变光线的传播方向。所有的光线和反射等都是实时的,简单几条线就能创造出意外的美景。

→ 观看演示

  1. 五彩斑斓

澳门新葡亰平台游戏 22

这个演示用到了色彩,位置,连接线,透明度的各种变换,当你用鼠标点击画布时,会看到水波一样的效果。动作非常的流畅。

→ 观看演示

  1. 粒子波

澳门新葡亰平台游戏 23

在这演示中移动你的鼠标,你会发现那些点像似始终和你保持距离的小精灵,你动它们就闪开,你走,它们就汇合。像水纹,像沙粒。很有趣的一个制作。

→观看演示

  1. 骑车游戏

澳门新葡亰平台游戏 24

要说HTML5的画布技术,我们不能不说一些游戏制作。HTML5的画布技术为未来网页游戏制作提供了无可争议的绝佳平台,下面这个简单但却精彩的自行车游戏就向我们充分展示了html5 canvas的强大功用。

→ 观看演示

  1. 汽车

澳门新葡亰平台游戏 25

这个演示跟上面的那个自行车很类似。你从可以看出它完全具备了一个游戏的各种元素。碰撞效果,重力加速度对物体运动的影响,多个物体的并发控制等等,这些都是用简单的html和js实现的。

→ 观看演示

  1. 手势控制幻灯片播放

澳门新葡亰平台游戏 26

这个演示的是一个更为复杂的现代浏览器超前体验,名为 手势 + Reveal.JS,这个实验使用了 WebRTC 和 JavaScript 来调用摄像头,目前只有使用谷歌浏览器才能正确的运行。该技术为用户提供了一个手势操作的界面,允许你使用手势来上下左右翻动指挥幻灯片的运行。这里的手势并不是手机触摸屏手势,而是通过电脑上连接的摄像头观察你在空中挥舞双手动作判断如何翻页。当然这种控制方式看起来并不新鲜,但再强调一遍,因为它是用纯HTML+Javascript实现的,所以它能在任何一台过去 5 年内生产的电脑上完美运行。

→ 观看演示

  1. 敲碎的视频

澳门新葡亰平台游戏 27

这绝对是这里最吸引眼球的一个演示——一个视频镜面爆破效果的奇异呈现。当你点击播放中的视频画面时,画面会破裂成碎片并四散开去,更奇妙的是,破碎的画面小碎片里仍然在播放它应有的那部分画面,很快所有的碎片又会聚拢复位。真是奇思妙想。

→观看演示

本文由前端php发布,转载请注明来源:让你惊叹不已的HTML5画布技术应用,Web开发者需知