本节将简述HTML5开发环境，包括了运行应用程序所用的浏览器，以及诸如性能分析器（profiler）、时间轴（timeline）等开发过程中经常用到的开发工具。你可以先略读本节，稍后有需要时再来参考它。

    1.4.1　规范

    以下三个规范与本书所讲内容有关：

    ·HTML5 Canvas

    ·基于脚本的定时控制动画（Timing control for script-based animation）

    ·HTML5视频与音频（HTML5 video and audio）

    由于历史原因，存在两个几乎完全一样的Canvas规范。其中一个是由W3C所维护的，它的网址是http://dev.w3.org/html5/spec；另一个则是由WHATWG所维护的，其网址是http://bit.ly/qXWjOl。而且，虽然在WHATWG所维护的规范中已经包含了Canvas绘图环境，不过W3C也有一份单独的规范，用于描述绘图环境 ，请参阅：http://dev.w3.org/html5/2dcontext。

    长久以来，开发者一直使用window.setInterval()或window.setTimeout()方法来制作基于网络的动画。然而，在第5章中大家将会看到，这些方法并不适用于对性能要求很高的（performance-critical）动画。应该使用window.requestAnimationFrame()方法来取代它们。该方法定义在名为“基于脚本的定时控制动画”规范之中，其网址是：http://www.w3.org/TR/animation-timing。

    最后，本书将会向读者演示如何将HTML5视频与音频元素集成入基于Canvas的应用程序之中。HTML5视频与音频元素的标准与HTML5标准本身都描述在同一份规范中，其网址是：http://www.w3.org/TR/html5/video.html。

    1.4.2　浏览器

    本书2012年年初出版之时，5大主流浏览器—Chrome、Internet Explorer、Firefox、Opera及Safari都对HTML5的Canvas元素提供了广泛的支持。有时候会产生些许的不兼容现象，比如本书2.14节，就解释了导致合成效果不兼容的原因。虽说如此，浏览器厂商们还是在遵从规范标准与提供高效实现这两件事情上做得很棒。

    Chrome、Firefox、Opera以及Safari这4个浏览器，对HTML5的支持已经有好一阵子了，Microsoft的Internet Explorer稍稍来迟了一步，它从IE9版本开始，才提供了对HTML5的广泛支持。不过，Microsoft在IE9与IE10中对Canvas的支持效果很出众，实际上，在本书出版时，这两个版本的浏览器所提供的Canvas实现在5大浏览器中是最快的。

    如果所实现的基于Canvas的应用程序必须支持IE6、IE7及IE8的话，那么有两个选择。其中一个是使用explorecanvas，它可以在老版本的Internet Explorer浏览器中增加对于Canvas的支持。另一个则是使用Google Chrome Frame，它将IE引擎替换成Google Chrome浏览器的引擎。explorercanvas与Google Chrome Frame都可以在Google网站上找到，如图1-4所示。

图1-4　Google网站中的explorercanvas与Google Chrome Frame项目，它们都支持IE61718

    1.4.3控制台与调试器

    所支持HTML5的主流浏览器都提供了控制台（console）与调试器（debugger）。实际上，浏览器厂商之间经常互相借鉴设计思想：基于WebKit的Firefox、Opera与IE浏览器，它们的控制台与调试器都非常相似。

    图1-5是Safari浏览器的控制台与调试器界面。

图1-5　Safari浏览器的控制台与调试器