HTML5 应用缓存与Web Workers

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已经获得大多数平台支持,适合完成大多数任务。

  HTML5已经成为当今世界的一个必然组成部分。由于World Wide
Web万维网是使用超文本标记语言来架构和呈现的,于是HTML5成为了最流行的编程语言之一。随着网络的不断扩张,Web开发人员非常有必要拥有最新的HTML5工具,用于创建动态和交互式的Web应用程序和网页。下面这些就是你不应该错过的新的HTML5工具。

什么是应用程序缓存?

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

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

 1.Timesheet.js

  Timesheet.js是一款用于创建使用JavaScript库的HTML工作流的简单工具。你可以添加可视化和转换到使用CSS的事件。Timesheet.js特别好使,因为它只需要几行JavaScript,就能生成漂亮的HTML布局。

图片 17

  官方网站:

html5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问

  1. 风好大,吹乱我的发

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

 2.Zebra

  Zebra是一个基于HTML5的工具,可用于创建基于Web的用户界面应用程序。只有你想不到,没有它做不到。Zebra还是那些需要客户端插件才能工作的flash和小程序技术的替代品。Zebra纯粹基于网络。

图片 18

  官方网站:

应用缓存的优势?

图片 19

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

 3.Google Web Designer

  此新工具由互联网巨头谷歌发布,旨在帮助那些没有HTML5语言背景知识的人创建互动的HTML5网站。该工具能为你提供所有的编码服务。所有你需要做的就是发挥你的想象力。如果你仍然想自己动手编写一些代码,那么也可以编辑生成的HTML5用于不同的输出。

图片 20

  官方网站:

1.离线浏览,用户可在应用离线时使用它们

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

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

 4.Brunch

  Brunch是强大的汇编程序,它能让你用一种简单而强大的方式构建精致外观的HTML5应用程序。Brunch能快速产出最稳定的应用程序。

图片 21

  官方网站:

2.速度,已缓存资源加载得更快

→ 观看演示

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

 5.NoMe

  NoMe是用于访问地理位置和使用HTML5的相关数据的JavaScript库。因为它无需下载大量的数据库到本地计算机,所以能为你进入位置和天气信息时跳过不少麻烦。

图片 22

  官方网站:

3.减少服务器的负载,浏览器将只从服务器下载更新过或更改过的资源

  1. 撕扯布单

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

 6.Snap Tomato

  这款新HTML工具允许你在任何设备上测试你的HTML5代码。Snap
Tomato简单易用,由一个编辑器和一个单独的标签组成,标签可以让你实时预览正处于编辑器窗口下的网页。

图片 23

  官方网站:

那么缓存如何实现呢?

图片 24

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

 7. Gauge.js

  Gauge.js是用于创建使用JavaScript自定义动画的仪表盘和滑动杆的脚本。你可以创建你所选择的任何仪表盘。此工具完全基于JavaScript,不使用任何其他的代码,如CSS和XML。

图片 25

  官方网站:

如需
启用应用程序缓存,请在文档的<html>标签中包含manifest属性,manifest文件的建议的文件扩展名是“.appcache’”

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

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

 8. CoverVid

  CoverVid是一个超棒的工具,可用于将HTML视频作为网站的背景,让页面有一种动态的感觉。它是一个小型的jquery扩展,既容易又便于使用。

图片 26

  官方网站:

manifest文件:

→ 观看演示

图片 27

 9. JSCapture

  JSCapture是目前互联网上最酷的工具之一。它能让你从浏览器对桌面进行截图。它甚至可以只使用JavaScript和HTML5记录你的屏幕。

图片 28

  官方网站:

1.CACHE MANIFEST 在此标题下列出的文件将在首次下载后进行缓存

  1. 幻影文字

 10.Quintus

  如果你想开发酷炫的游戏,那么选择Quintus吧。Quintus是一款简单的JavaScript
HTML5游戏引擎,易学又易于使用。

图片 29

  官方网站:

  以上这10个HTML5工具希望能给你带来帮助,你有哪些优秀的HTML5工具框架,欢迎和我们分享。

  英文原文:10 New HTML5 Tools Which Developers Shouldn’t
Miss

2.NETWORk:在此标题下列出的文件需要与服务器的连接,并且不会被缓存

图片 30

3.FALLBACK:在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)

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

以上呢就是h5的应用缓存,根据各个条件进行筛选部署到不同的标题下

→ 观看演示

附注:manifest部署好后一定要引入到html标签中

  1. 佛光普照

二。什么是Web Worker呢?

图片 31

Web Worker是运行在后台的javaScript,独立于其他脚本,不会影响页面的性能

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

最好的解释呢就是:其实我们整个程序在创建新的程序的时候它是存在一个线程,也就是主线程,在支持我们程序的运行,主线程的任务就是响应ui的操作,如果这个时候你让主线程做一个特别复杂的操作那肯定回很卡顿,很难响应客户的操作,那么这个繁重的任务呢可以通过web
Worker进行处理,然后把处理的结果返回给我们主线程,这样我们就可以看到了,就不会影响响应页面的执行

→ 观看演示

方法:

  1. 五彩斑斓

PostMessage()-它用于向html页面传回一段信息

图片 32

terminate()-终止web Worker,并释放浏览器/计算机资源

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

事件:onmessage

→ 观看演示

  1. 粒子波

图片 33

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

→观看演示

  1. 骑车游戏

图片 34

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

→ 观看演示

  1. 汽车

图片 35

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

→ 观看演示

  1. 手势控制幻灯片播放

图片 36

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

→ 观看演示

  1. 敲碎的视频

图片 37

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

→观看演示

发表评论

电子邮件地址不会被公开。 必填项已用*标注