HTML5火力展示!九个让你惊奇的HTML5应用

浏览量608 点赞187 2020-06-07

笔者在近日写了数篇文章谈论 HTML5 在影片播放的优势、以及其对于 Flash 所产生的威胁 ,但对于大多数的读者来讲仍然感受不到 HTML5 的威力,在这一篇文章中,笔者将介绍十个精选的 HTML5 应用,请各位读者一同体验 HTML5 的魅力!

浏览器需求

目前 IE 的 HTML5 支援仍然相当有限,无论是 6/7/8 均只提供了有限的 HTML5 及 CSS3 支援。而对于其他的浏览器而言,各家目前的实做进度不一,因此若是读者有兴趣试玩以下介绍的网站,还请安装 Google Chrome 或是 Mozilla Firefox 等对新的网页标準支援较佳的浏览器,并且根据网站上的建议浏览器进行浏览,这样才能确保得到完整的效果。

Sketchpad

Sketchpad 是一个完全建构在 HTML5 的 canvas 功能上的线上绘图软体,虽然与一般桌面上的

另外值得注意的一点是,在最后储存的时候也是使用 canvas 中的 toDataUrl 函式,即时的将画面在浏览器即时转换成为一般可以下载的 png 档。

HTML5火力展示!九个让你惊奇的HTML5应用
CanvasPaint
HTML5火力展示!九个让你惊奇的HTML5应用
CanvasPaint 同样也是透过 HTML5 的 canvas 功能所设计的绘图软体,但比较不同的是整个绘图软体的功能、介面都是模仿 Windows 系列中所内建的小画家软体,十分的复古!
Tetris

俄罗斯方块相信是许多人年轻的回忆,而 Tetris 便是透过 HTML5 在 Web 上重现这个经典的游戏。就如同我们以往在游戏机上所玩的操作一般,透过左右键移动方块,上键变换方块方向,下键来让方块快速的移动到底。

HTML5火力展示!九个让你惊奇的HTML5应用
Sticky Notes

Sticky Notes 让使用者能够在这个网页上建立新的便条纸笔记、移动这些便条纸,有趣的是,这个网站同时使用了 HTML5 的 localStorage 功能,也就是当你关闭视窗后,在下次开启时会自动的还原显示上次关闭时所纪录的笔记。

HTML5火力展示!九个让你惊奇的HTML5应用
Calendar
HTML5火力展示!九个让你惊奇的HTML5应用
同样类似 Sticky Notes 的概念,Calendar 透过了 HTML5 的本机储存功能提供了一个浏览器介面的行事曆软体。
Things

Things 是一套在 Mac/iPhone 上相当热门的时间管理软体,介面设计优雅、功能强大,而在近日他们也推出了 HTML5 的 Demo 版,虽然只是一个实验性质的测试版,但未来他们将考虑将 Things 移植到网页上让更多使用者能够使用。

Super Mario Kart Online

Super Mario Kart Online 试图在 HTML5 上重现家用游戏主机的经典名作、马力欧赛车,透过 canvas 的帮助,Super Mario Kart Online 重现了简单的模拟 3D 跑道,而使用者可以透过上下左右来操作、移动赛车。

HTML5火力展示!九个让你惊奇的HTML5应用
虽然目前这个只是一个略显粗糙的 Demo,但仍然让人相当期待是否在未来会有完整的版本呈现。
Bespin

Bespin 是由开发 Firefox 的 Mozilla 所推出的一项网路服务,将一般程式师的软体开发工具透过 HTML5 的技术来在浏览器上实现。除了提供一般程式开发中常见的 syntax highlight 之外,也支援了 Mercurial 这套版本控制系统的整合。另外,也有支援多人协作程式码,让多位开发者能够在 Bespin 上编辑同一份程式码。

HTML5火力展示!九个让你惊奇的HTML5应用
Guacamole

在众多 HTML5 的运用中,最重量级的应用莫过于现在要介绍的 Guacamole 了。Guacamole 是一套透过 HTML5 及 Canvas 来实做的 VNC 软体,所谓的 VNC 便是远端桌面的概念,让我们能够透过网路来操作另外一台电脑。而一般的 VNC 软体都得透过安装桌面的程式才能进行操作,但透过 Guacamole 我们只需要使用支援 HTML5 的浏览器并连上网站就可以操作远端的电脑了!

结论

在看过以上这些 HTML5 的应用之后,相信各位读者对于 HTML5 的威力应该可以亲身感受,就让我们一起期待这个网页新标準会为市场带来什幺更多有趣的应用!