五项Web技术：WebGL和SVG名列其中

by Ray_tiger

　　Bruce Lowson 是 Opera 开放 web 标准的撰写人员之一，一些没有包含在 HTML5 之内的浏览器技术十分奇妙，包括 WebGL 和 SVG，作者希望通过本文与共同爱好者们分享。

　　最近一位 HTML5 专家 Rich Clark（作者的好朋友）为大家做了一个 HTML5 APIs 的简介，在文章中为大家指向了一个令人迷惑的网页（web 平台：浏览器技术 http://platform.html5.org/），其中包含两个很长的专栏和小正文并提及到一些让人感到迷茫的技术，例如“window.crypto.getRandomValues”和“DOM Mutation observer”。

　　别担心，咱们不去管那些啦，因为有些还远远没有完成呢，在浏览器中见到它们还要等一阵子。然而，其它已经在浏览器中，或者距离您很近，或者马上就要出现。人们可能将称之为“HTML5”，尽管它们并不是。其实，它们都属于令人激动的新兴 Web 技术（New Exciting Web Technology），值得每个开发者关注。

　　 WebGL

　　WebGL 是一种基于 Web 的 Graphic 库，由非盈利组织 Khronos 运营，目前结合 HTML5<canvas>元素广泛应用在 3D 图形开发中。

　　学习 WebGL 比较困难，因为它是底层开发——它运行在 GPU 上面，而且它实际上是一个 OpenGL 的 JavaScript port，是一种游戏开发者使用的已经长期建立的 API 集。WebGL 的主要受众是哪些已经拥有丰富 OpenGL 经验的游戏开发者，他们可以通过 WebGL 为 web 平台编写游戏。

　　好在有很多资源可以帮助您学习 WebGL，这些资源不仅仅是关于游戏开发的，还有很多奇幻的图形、视觉和音乐视频等方面。作者个人比较推荐的是：

• Introduction to WebGL。 http://dev.opera.com/articles/view/an-introduction-to-webgl/作者 Luz Caballero，简介可以获得的各种库。
• Raw WebGL 101。 http://dev.opera.com/articles/view/raw-webgl-part1-getting-started/适合那些不使用库的用户。
• Learning WebGL。 http://learningwebgl.com/一个非常好的引导网站。
• WebGL 101。http://www.youtube.com/watch?v=me3BviH3nZc 一个由 Erik Moller 制作的介绍视频（2.5小时）。
• See Emberwind。http://operasoftware.github.com/Emberwind/一个由 Erik Moller 做的 WebGL 游戏 port，您可以深入 Github 或看代码。

　　WebGL 目前在所有桌面浏览器（发布版和开发频道）中都支持，除了 IE10（微软表示不支持）。对于移动产品来说，已经在 Opera Mobile 12 中发布了，最终会出现在 Android，BlackBerry Playbook 2.0，Nokia N900，SonyEricsson Xpertia Android Phones 等以及 Firefox 移动浏览器中。

　　 SVG

　　SVG（Scalable Vector Graphics）已经在 Opera，Firefox，Chrome 中存在多年了，但是直到 IE9 开始支持它之后才渐渐变得主流一些它在 HTML5<Canvas>的光环下显得有点暗淡，尽管 SVG 和 HTML5<canvas>是面向不用应用的不同工具。

　　Canvas2D 可以迅速 paint 图形到屏幕上面，这一点很犀利。但是其全部功能就是 paint 了，没有内存来做那些（位置，顶层或其他）其他功能。如果您需要那种 book-keeping 工作，就只能自己用 JavaScript 实现，因为 Canvas2D 不会把 DOM 保存到内存中，也正因为如此 Canvas2D 速度快，十分适合第一人称射击类应用。

　　与 Canvas2D 不同，SVG 在您需要保存 DOM 的时候就给力了。使用 JavaScript，所有的 Objects 都可以移动并且与动画无关。您可以试试 Daniel Davis 做的复古类 SVG 游戏 Inbox Attack（http://people.opera.com/danield/svg/inbox-attack.svg）来体验一下，并且看看源代码来了解如何完成动画效果。

　　因为 shape 和 path 是用 Markup 来描述的，所以他们可以用 CSS 来定型。与<canvas>不同，text 在 SVG 中保持 text 格式并且更加的灵活，更加可扩展，更加易于访问。在 Canvas 中，text 变成了像素，就像 Photoshop 中的图形 text。

　　SVG 最强大的特性是它基于矢量，这样您的插图，图形和 UI 图标等都是矢量图了，这样无论是在 50 英寸的电视屏还是手机屏幕桌面上，看上去感觉都是一样的清晰。在当今这样一个 web 应用无处不在的时代，SVG 图形甚至可以包括媒体查询（http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes），可以是响应式的，可以根据不同的目标设备做尺寸的调整。

　　综上所述，在最新的桌面浏览器中 SVG 已经能被广泛支持了。在移动产品方面的支持总体上来说也很好，以及预期在 Android 3.0 版本之前原生浏览器也会支持它了。

　　Daniel Davis 有一些 SVG 介绍性的资源（ http://my.opera.com/tagawa/blog/learning-svg），作者个人也推荐一本免费的电子书：Learn SVG（ http://www.learnsvg.com/book-learnsvg/），您也可以看看《SVG or Canvas？Choosing Between the Two》（ http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/）来了解二者的区别。

　　 getUserMedia

　　不像那些被错误地称为 HTML5 的 API，getUserMeida（在下文中简写为 gUM）有个相对正当的理由：起初它是 HTML5<device>元素，之后它改名了然后离开了 W3C WebRTC 规范集合。

　　gUM 允许访问用户的摄像头和麦克风，本来是在 WebRTC 规范中在浏览器中进行 P2P 视频会议的，当 gUM 拥有了其他的用途，就离开了 WebRTC。

　　摄像头的访问最终在 Opera12 安卓版，Opera 桌面实验室和 Google Chrome Canary 里面实现了，不过 Opera 和 Chrome 都还没有实现麦克风的接入。

　　W3C 规范依然在用，所以 Opera 和 Webkit 有不同的语法规范，这样的麻烦被一个叫做 The gUM Shield（ https://gist.github.com/f2ac64ed7fc467ccdfe3）的小 JavaScript 片段搞定了。如果您想更深入地了解这方面请看作者的另一篇文章：It’s Curtains for Marital Strife Thanks to getUserMedia（ http://html5doctor.com/getusermedia/）

　　当视频从设备开始流传输的时候，源数据可以被做成变成了<video>元素，如果需要的话还可以被定为到屏幕外面，然后拷贝到<canvas>里面进行所需要的操作。Paul Neave 写的《HTML5 变成玩具！》（http://neave.com/webcam/html5/）为了方便操作把流媒体数据拷贝到 WebGL 中。作者在 .net 杂志的 226 话有采访他的报导（ http://www.netmagazine.com/shop/magazines/april-2012-226）。

　　如果想把 web app 的功能做得像 native app，gUM 需要做很多的工作。试了一下 Neaver 的 gum 和 WebGL 在 Opera Mobile 12 上面的 demo，感觉和平台独有的 app 一样富有响应式并且很时髦。当在浏览器产品中其功能被广泛应用的时候，作者语言会有很多基于 web 的 QR 代码阅读者以及很多增强现实的应用。

　　 File APIs

　　W3C File APIs 允许 JavaScript 访问本地文件，其中最常用的 API 是 FileReader，可以从 Opera，FireFox，IE10平台等的预览版看到（不包括 Safari）。

　　这一份 W3C 规范“为了在 web 应用中提供 API 来代表文件对象，以及编程选择和访问数据”。例如：你可以上传文件到浏览器中，并本地查找相关信息（例如文件名，尺寸，类型）而不需要到服务器端。您也可以打开文件，操作内容，这样可以加强基于浏览器的应用的交互性，用起来更像是本地应用。

　　另一个常用的用途是使传统的图像上传兑换狂更具有 Web2.0 特色：通过允许在浏览器内部的 Drag and Drop，而不是本地文件系统中改变。

　　您可以通过使用一个普通的<input type=”file”>开始，然后循序渐进地提高。HTML5 Drag&Drop 支持特征检测，如果存在的话就使用<div>替换<input>，那就是您的 drag 图像目标了。当图像被 drag 到目标的时候，使用 File Reader API 来显示一个指甲盖大小的图像。您可以看一下 Remy Sharp 的 demo（ http://html5demos.com/file-api）。

　　还有很多写文件和操作文件系统的规范，不过这些对目前的跨浏览器应用来说还不太够：

　　W3C 文件 API：（ http://dev.opera.com/articles/view/the-w3c-file-api/）非常基础的介绍。

　　开发文件系统 API：（ http://www.html5rocks.com/en/tutorials/file/filesystem/）HTML5 Rocks 文章，（仅限 Chrome）。

　　 Feature-detecting, progressive enhancement and upgrade messages（特征检测，渐进式增强和消息通知）

　　诚然，在没有那些奇幻的 API 的时候，大家总是试图使用渐进式增强和 HTML 语义的方法让网站照常工作。然而有时候却不能这样，例如 Paul Neaver 的《HTML5变成玩具》中，如果 gUM 和 WebGL 现在不存在的话，其网站不能有什么补救措施了，整个网站的核心都没了。

　　在这样的情况下有两种典型的惯例：要么是显示一条消息说“你的浏览器太垃圾了，塞油哪啦”或者说“你必须用 Chrome6/Firefox 4/Opera10等[插入能支持你应用的浏览器]才能访问”。第一种方法又没用又粗鲁，没有建议和补救措施；第二种方法是个临时办法，因为六个月之内所有浏览器可能都能支持你现在使用的技术了，让你在网站上留下的信息过时：例如您写的解决方案是建议使用 Firefox4 来访问，可是半年后用户安装着 Firefox7 回来访问你的页面了，这可就真的没救了。

　　如果您真的不能使用渐进式增强，那么就用新型的 HTML 5 Please API 吧（http://api.html5please.com/）。这是 Jon Neal，Divya Manian 和其他几位大虾创作的。通过使用它，可以先查询 caniuse.com 然后返回一个最新（能支持你的新特性的）的浏览器版本列表。

　　如果您已经做了一个需要 Canvas 或 WebSQL DB 技术的 DEMO 或者网站，恐怕你已经处在一个这样的尴尬境地了：您只是在告诉访问者们他们的浏览器不咋地。但是您不能只推荐他们使用一个能支持这些特性的浏览器来补救，例如“找个支持 WebRTC 性能的浏览器再来吧”，这样对于大家都没啥效果。

　　HTML5 Please API 把开发人员的语言（和特性）翻译成用户能理解的语言（浏览器）。通过调用这个 API 你就可以得到一些 HTML 返回值来告诉访问者，或者返回一个带有相关数据的 JSON 对象（包括浏览器 Logo 及下载介绍等信息）。这样您可以根据不同的客户来显示不同的补救信息了。

　　使用这种方式最令人欣慰的是：如果所有新特性在客户当前浏览器的升级版都能支持的情况下，Please API 值建议访客对浏览器升级，而不是让访客单纯为了访问你这个页面而更换浏览器。效果图如下：

　　 结束语：

　　正如您所看到的，大量的令人惊喜的新技术正在接踵而至，您着手研究上述某项技术的时候恐怕又要担心更新鲜的技术到来了吧。希望您开发得愉快，请记得让您所开发的应用在尽可能多的浏览器上面测试一下。

　　———————————————————————————————

　　原文作者：Bruce Lawson 2012年 3 月 19 日

　　图片整理：Rob Winter ；HTML5阐述： Mike Brennan

　　原文地址： http://www.netmagazine.com/features/developers-guide-new-exciting-web-technologies

　　关于 Bruce Lawson ：支持 Opera 开放标准，专注于 HTML5，窗口小部件和接入性。他是一位 HTML5 专家，与 Remy Sharp 共同编写了《Introducing HTML5》。他的个人网站： http://brucelawson.co.uk/