canvas教程

开始学习HTML5

字号+ 作者:H5之家 来源:H5之家 2015-11-11 08:18 我要评论( )

您现在的位置: e-works 百味书屋 书籍列表 HTML5 Canvas核心技术—图形、动画与游戏开发 开始学习HTML5 第一章 基础知识第四节 开始学习HTML5 本节将简述HTML5开发环境,包括了运行应用程序所用的浏览器,以及诸如性能分析器(profiler)、时间轴(timeline

您现在的位置:e-works > 百味书屋 > 书籍列表 > HTML5 Canvas核心技术—图形、动画与游戏开发 > 开始学习HTML5

第一章 基础知识 第四节 开始学习HTML5

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

    1.4.1 规范

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

    ·HTML5 Canvas

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

    ·HTML5视频与音频(HTML5 video and audio)

    由于历史原因,存在两个几乎完全一样的Canvas规范。其中一个是由W3C所维护的,它的网址是;另一个则是由WHATWG所维护的,其网址是。而且,虽然在WHATWG所维护的规范中已经包含了Canvas绘图环境,不过W3C也有一份单独的规范,用于描述绘图环境 ,请参阅:。

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

    最后,本书将会向读者演示如何将HTML5视频与音频元素集成入基于Canvas的应用程序之中。HTML5视频与音频元素的标准与HTML5标准本身都描述在同一份规范中,其网址是:。

    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所示。

 

Google网站中的explorercanvas与Google Chrome Frame项目,它们都支持IE61718

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

    1.4.3控制台与调试器

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

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

 

Safari浏览器的控制台与调试器

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

HTML5 Canvas核心技术—图形、动画与游戏开发

实际售价以e-works战略合作伙伴京东商城当日售价为准

同类图书点击排行榜

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评
n