HTML5 canvas开发详解(第2版)(txt+pdf+epub+mobi电子书下载)


发布时间:2020-06-18 17:30:02

点击下载

作者:[美]Steve Fulton Jeff Fulton(著)

出版社:人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

HTML5 canvas开发详解(第2版)

HTML5 canvas开发详解(第2版)试读:

前言

第2版介绍

自从本书第1版发行之后,在过去的两年里,HTML5 Canvas的使用有了突飞猛进的增长。本书的第1版可以称得上是第一批介绍Canvas的专著之一。在我们为自己的快速而感到自豪同时也意味着我们曾经独自进行了大量的研究和探索。早在2011年,只有极少数HTML5 Canvas应用的例子和教程。但在2013年情形发生了改变。现在有许多关于HTML5 Canvas的资源可供选择,从框架到API,有许多网站和书籍进行专门的阐述。为了编写第2版,我们进行了大量艰辛的工作来检查在第1版中哪些部分有效,哪些部分已经失效。在接下来的章节中,描述了一些令人激动的改变和更新,这几页是非正常值得期待的。第1版的更新

本书大部分内容与第1版保持一致。这样做的原因是因为本书是面向广泛开发者的,既有从来没有接触过Canvas的开发者,也有已经有一些经验想学习Canvas高级使用技巧的开发者。

本书每一章都重新进行了修订,对代码进行更新和优化,更新浏览器的兼容性以及在过去两年中发现的其他问题。一小部分内容被删除了。一些冗余的代码列表从书中移动到了代码包中,方便了本书的阅读。我们用更多更简短的示例替换了第4章的部分内容。我们还完全重写了第10章。我们删除了PhoneGap的介绍,这是因为类似的内容已经非常普遍了。

我们还添加了许多新的内容,相信这些内容可以帮助读者的Canvas应用更上一层楼。这些内容包括:● 一个新的Hello World动画程序;● 介绍无障碍化和sub-dom概念;● 多种清除画布内容的方法;● 在当前路径中查找点的方法;● 绘制焦点环;● 在文本上应用渐变色动画;● 使用像素数据进行碰撞检测;● 5个新的例子专门介绍如何Box2Dweb开发基于物理模型的动

画;● 使用getUserMedia()方法在Canvas上捕获视频;● 使用新的Web Audio API;● A*路径查找和动画;● 基于区块的粗糙滚动和精细滚动;● 在iOS上开发一个全屏的移动网页应用;● 一个新游戏——Retro Blaster触屏版;● 一个新的支持拖放的例子;● 介绍如何搭建你自己的Canvas应用框架;● 为Windows 8开发HTML5应用的教程。如何运行本书中的示例

使用HTML5和Canvas编程最大的好处就是进入的门槛非常低——需要的所有工具就是一个现代浏览器和一个文本编辑器。

为了得到最大兼容性,本书建议读者下载或使用下列最新版本的浏览器,并且排名越前优先级越高:● Chrome;● Safari;● FireFox;● Internet Explorer 10;● Opera。

本书中的每一个示例都在Google Chrome、Safari和FireFox中测试过。本书已经尽最大努力确保这些示例可以兼容尽可能多的浏览器,不过,这里依然推荐读者使用Google Chrome或Safari浏览器以得到最好效果。读者需要具备的知识

读者最好了解一些现代语言的编程知识,如C、C++、C#、ActionScript 2、ActionScript 3、Java或JavaScript。不过,在第1章介绍Canvas的同时也会介绍一些网页编程知识,使得新读者入门更容易。

如果读者是Flash的开发者,那么JavaScript语言与ActionScript 1语言在本质上是同一种语言。Adobe公司在ActionScript 2中进行了一些改进,但读者应该也会比较容易地接受JavaScript语言。如果读者只有使用ActionScript 3语言的经验,那么使用JavaScript时会感觉有一些退步。

如果读者是Silverlight或C#的开发者,那么请深呼吸,回忆一下在ASP.NET和C#出现之前不得不使用VBScript语言开发网页应用程序时的场景。现在的情况与之有一些类似。本书组织结构

本书分为11章。在第2版中对所有章节都进行了更新、修订和扩充。第1~4章通过示例向读者展示HTML Canvas的API的使用方法。内容主要包括文本、图像和绘图相关功能。这些章节包含几个完整的应用,但是演示程序的组成部分主要是为了向读者展示Canvas API的不同功能。在接下来的第5~10章中,示例的范围被扩展到应用程序的级别,在这个过程中将对Canvas的API做进一步的介绍。这些章节介绍了应用中的数学和物理算法、视频、音频、游戏和移动应用。在最后的第11章中,本书介绍了还处于实验性的领域:3D、多人应用、Windows8和一个Canvas的对象模型。

本书不会将W3C发布的Canvas API标准列举出来并一一讲解。本书会对一些API详细讲解,对于另一些不适合游戏开发的API将会略过。读者可以在下面的网站中查看所有API文档。

http://dev.w3.org/html5/2dcontext

本书的目标是重点介绍Canvas中可用于创作动画、游戏和网页娱乐程序的特性,同时支持网页和移动网页。

本书的图例如下所示。

提示提示这个图标用来强调一个提示、建议或一般说明。

警告警告这个图标用来表示一个警告或注意事项。代码示例的使用

本书的目的是为了帮助读者完成工作。一般而言,你可以在你的程序和文档中使用本书中的代码,而且也没有必要取得我们的许可。但是,如果你要复制的是核心代码,则需要和我们打个招呼。例如,你可以在无需获取我们许可的情况下,在程序中使用本书中的多个代码块。但是,销售或分发O’Reilly图书中的代码光盘则需要取得我们的许可。通过引用本书中的示例代码来回答问题时,不需要事先获得我们的许可。但是,如果你的产品文档中融合了本书中的大量示例代码,则需要取得我们的许可。

在引用本书中的代码示例时,如果能列出本书的属性信息是最好不过。一个属性信息通常包括书名、作者、出版社和ISBN。例如“HTML5 Canvas, Second Edition by Steve Fulton and Jeff Fulton (O’Reilly), Copyright 2013 8bitrocket Studios, 978-1-449-33498-7”。

在使用书中的代码时,如果不确定是否属于正常使用,或是否超出了我们的许可,请通过permissions@oreilly.com与我们联系。联系方式

如果你想就本书发表评论或有任何疑问,敬请联系出版社:

美国:

 O’Reilly Media Inc.

 1005 Gravenstein Highway North

 Sebastopol, CA 95472

中国:

 北京市西城区西直门南大街2号成铭大厦C座807室(100035)

 奥莱利技术咨询(北京)有限公司

我们还为本书建立了一个网页,其中包含了勘误表、示例和其他额外的信息。你可以通过如下地址访问该网页:

http://www.oreilly.com/catalog/9781449387860

关于本书的技术性问题或建议,请发邮件到:

bookquestions@oreilly.com

欢迎登录我们的网站(http://www.oreilly.com),查看更多我们的书籍、课程、会议和最新动态等信息。

Facebook: http://facebook.com/oreilly

Twitter: http://twitter.com/oreillymedia

YouTube: http://www.youtube.com/oreillymediaSafari® 在线图书

Safari在线图书是一个按需订阅的数字图书馆。它有不少于7500本技术和创意相关的书籍和视频供你参考和搜索。

通过订阅,你可以在线阅读任何页面或任何视频,甚至可以从手机或移动设备上在线阅读。你可以在书籍出版前访问到它们,并给读者发送反馈。其他功能还包括:复制和粘贴代码、组织收藏夹、下载和标记章节、做笔记、打印等。

O’Reilly Media已经将本书英文版上传到Safari在线图书服务。在http://my.safaribooksonline.com上免费注册,你就可以访问本书所有章节以及类似主题的书籍。▶▶第1章HTML5 Canvas简介

HTML5是新一代的HTML,即超文本标记语言。HTML从1993年第一次标准化后,便奠定了万维网的基础。HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容。

HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域。即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧中完全重绘屏幕上的位图。作为一名程序员,所要做的就是在每一帧渲染之前设置屏幕的显示内容,这样才能显示正确的像素。

这使得HTML5 Canvas与在保留模式下运行的Flash、Silverlight或SVG有很大的区别。在保留模式下,对象显示列表由图形渲染器保存,通过在代码中设置属性(例如,x坐标、y坐标和对象的alpha透明度)控制展示在屏幕上的对象。这使得程序员可以远离底层操作,但是它弱化了对位图屏幕最终渲染效果的控制。

基本的HTML5 Canvas API包括一个2D环境,允许程序员绘制各种图形和渲染文本,并且将图像直接显示在浏览器窗口定义的区域。读者可以对画布上放置的的图形、文本和图像应用颜色、旋转、渐变色填充、alpha透明度、像素处理等,并且可以使用各种直线、曲线、边框、底纹来增强其效果。

就其本身而言,HTML5 Canvas 2D环境是一个用来在位图区域渲染图形显示的API,但人们很少使用该技术在这个环境中创建应用程序。通过跨浏览器兼容的JavaScript语言可以调用键盘鼠标输入、定时器间隔、事件、对象、类、声音、数学函数等功能,希望读者能够学会并使用HTML5 Canvas创建优质的动画、应用程序和游戏。

本书将深入解读Canvas API。在此过程中,本书将展示如何使用Canvas API来创建应用程序。本书中的很多技术已经被成功应用于其他平台,现在,本书要将它们应用到HTML5 Canvas这个令人兴奋的新技术上来。支持HTML5 Canvas的浏览器除了IE 8以外,很多新版本的浏览器都支持HTML5

Canvas。几乎每天都会支持新的特性。支持最好的应该是

Google Chrome,紧接着是Safari、Internet Explorer 10、

Firefox、Opera。本书将利用名为modernizr.js的JavaScript

库来帮助判断各个浏览器支持哪些Canvas特性。1.1 什么是HTML5

最近HTML5的定义已经发生了转变,当作者在2010年编写本书第一版的时候,W3C的HTML5规范是一个独特的单元,它涵盖了有限的功能集合,其中包括了诸如新的HTML标签(

那么,究竟什么是HTML5?在W3C HTML5的常见问题中,关于HTML5是这样说明的:HTML5是一个开放的平台下开发的免费许可条款。

术语HTML5会被人们使用在以下两个方面。● 指一组共同构成了未来开放式网络平台的技术。

这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、

XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套

技术的边界是非正式的,且随时间变化的。● 指HTML5规范,当然也是开放式网络平台的一部分。

在过去的几个月里,我们通过交谈和项目工作了解到的是:普通人(或者说那些急着要完成项目的客户)谁也不会严格遵守上述定义,这些都是HTML5。因此,当有人说起“HTML5”的时候,他们实际上指的是“开放式网络平台”。

当人们提及“开放式网络平台”时,有一件可以确定的事是,这份邀请名单中一定不能漏掉Adobe Flash。

HTML5是什么?总之,它不是Flash(也不是其他类似的技术)。HTML5 Canvas是最有能力在网络和移动互联网上取代Flash功能的最好的技术。这本书将带领读者学习如何开始使用HTML5 Canvas。1.2 基础的HTML5页面

在开始讲解Canvas前,需要谈论一下HTML5的相关标准——这里将使用HTML5来创建Web页面。

HTML是用于在互联网上构建页面的标准语言。本书不会将很多时间花费在讲解HTML上,但HTML是的基础,所以不能完全跳过它。

一个基本的HTML页面分成几个部分,通常有和,新的HTML5规范增加了一些新的部分,例如

标签通常包含与使用标签来创建HTML页面相关的信息。将JavaScript函数放在中是约定俗成的,稍后讨论标签时也会这样做。虽然有理由把JavaScript函数放在中,但是简单起见,最好把JavaScript函数放在中。

基本的HTML页面如例1-1所示。

例1-1 简单的HTML页面 CH1EX1: Basic Hello World HTML PageHello World!1.2.1 

这个标签说明Web浏览器将在标准模式下呈现页面。根据W3C定义的HTML5规范,这是HTML5文档所必需的。这个标签简化了长期以来在不同的浏览器呈现HTML页面时出现的奇怪差异。它通常为文档中的第一行。1.2.2 

这是包含语言说明的标签:例如," en "为英语。下面是一些常见的语言值:

中文——lang= " zh ";

法语——lang= " fr ";

德语——lang=" de ";

意大利语——lang=" it ";

日语——lang= " ja ";

韩语——lang= " ko ";

波兰语——lang= " pl ";

俄语——lang= "ru ";

西班牙语——lang = " es "。1.2.3 

这个标签说明Web浏览器使用的字符编码模式。如果没有需要特别设置的选项,一般没必要改变它。这也是HTML5页面需要的元素。1.2.4 

这个标签说明在浏览器窗口展示的HTML的标题。这是一个很重要的标记,它是搜索引擎用来在HTML页面上收录内容的主要信息之一。1.2.5 一个简单的HTML5页面

现在,在浏览器中看看这个页面(这是一个伟大的时刻,可以准备好工具开始开发代码了)。打开所选择的文本编辑器以及Web浏览器——Safari、FireFox、Opera、Chrome或IE。(1)在文本编辑器中,输入例1-1中的代码。(2)选择路径,保存为CH1EX1.html。(3)在Chrome、Safari或Firefox的File菜单中,找到Open File命令,单击它,将看到一个能够打开文件的对话框(在Windows下用Chrome时,也可以按Ctrl+O键来打开文件)。(4)找到刚刚创建的CH1EX1.html。(5)单击“打开”按钮。

可以看到图1-1所示的结果。图1-1 “Hello World!”页面1.3 本书使用的基础HTML页面

可以使用多个HTML标签来创建HTML页面,在HTML以前的版本中,需明确指示Web浏览器如何渲染HTML页面的标签(例如

)。然而,在过去10年中,浏览器的标准越来越严格,这类标签就被束之高阁了。CSS(层叠样式表)成为定义HTML内容样式的主要方式。因为本书不是关于如何创建HTML页面的(页面中不包含Canvas),因此这里不打算讨论CSS的内部工作原理。

本节将只关注两个最基本的HTML标签:

。1.3.1 

是本书主要使用的一个HTML标签,用来定位在HTML页面的位置。

例1-2使用

标签定义了“Hello World!”在屏幕上的位置,如图1-2所示。

例1-2 HTML5中的“Hello World!” CH1EX2: Hello World HTML Page With A DIV

Hello World!
图1-2 使用
的HTML5中的“Hello World!”

style="position: absolute; top: 50px; left: 50px;"——这段代码是在HTML页面中使用内联CSS的例子。它告诉浏览器呈现内容的绝对位置为:距离页面顶端50像素,并且距离页面左端50像素。

警告这个

可以在浏览器中定位画布,但是对试图在画

布上捕捉鼠标点击时则没有任何帮助。在第5章中,本书将

讨论一种既能定位画布又能捕获正确的鼠标点击位置的方

法。1.3.2 

利用对

进行绝对定位,有助于更好地使用。把放在
内,
可以帮读者获取信息。例如,当鼠标滑过画布时,可以获取定义指针的相对位置。1.4 文档对象模型(DOM)和Canvas

文档对象模型代表了在HTML页面上的所有对象。它是语言中立且平台中立的。它允许页面的内容和样式被Web浏览器渲染之后再次更新。用户可以通过JavaScript访问DOM。从20世纪90年代末以来,文档对象模型已经成为JavaScript、DHTML和CSS开发最重要的一部分。

画布元素本身可以通过DOM,在Web浏览器中经由Canvas 2D环境访问。但是,在Canvas中创建的单个图形元素是不能通过DOM访问的。正如本章前面讲到的,画布工作在即时模式,它并不保存自己的对象,只是说明在每个单个帧里绘制什么。

例1-2在HTML5页面上使用DOM定位标签,这也可以用JavaScript来操作。在开始使用前,首先需要了解两个特定的DOM对象:window和document。

window对象是DOM的最高一级,需要对这个对象进行检测来确保开始使用Canvas应用程序之前,已经加载了所有的资源和代码。

document对象包含所有在HTML页面上的HTML标签。需要对这个对象进行检索来找出用JavaScript操纵的实例。1.5 JavaScript和Canvas

JavaScript是用来创建Canvas应用程序的一种程序设计语言,能在现有的任何Web浏览器中运行。如果需要重温JavaScript的相关内容,请关注Douglas Crockford的书《JavaScript: The Good Parts》(O’Reilly)。这本书很流行,并且有很强的参考价值。JavaScript放置的位置及其理由

使用JavaScript为Canvas编程会产生一个问题:在创建的页面中,从哪里启动JavaScript程序?

把JavaScript放进HTML页面的 标签中是个不错的主意,这样做的好处是很容易找到它。但是,把JavaScript程序放在这里就意味着整个HTML页面要加载完JavaScrpit才能配合HTML运行,这段JavaScript代码也会在整个页面加载前就开始执行了。结果就是,运行JavaScript程序之前必须检查HTML页面是否已经加载完毕。

最近有一个趋势是将JavaScript放在HTML文档结尾处的

标签里,这样就可以确保在JavaScript运行时整个页面已经加载完毕。然而,由于在运行程序前需要使用JavaScript测试页面是否加载,因此最好还是将JavaScript放在中。如果读者不喜欢这样,也可以采用适合自己的代码习惯。

代码放在哪儿都行——可以放在HTML页面代码行内,也可以加载一个外部 .js文件。加载外部JavaScript文件的代码大致如下。

简单起见,这里将把代码写在HTML页面行内。不过,如果读者有把握,把它放在一个外部文件再加载运行也未尝不可。

提示HTML5不需要再指定脚本类型。1.6 HTML5 Canvas版“Hello World!”

如前所述,将Canvas放入HTML5页面时第一件要做的事就是,看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现。在用Canvas处理图像和声音的时候,这点会非常重要。

为此,这里要使用JavaScript的事件。当定义的事件发生时,事件从对象发出。其他对象监听事件,这样就可以基于事件进行处理。用JavaScript可以监听对象的一些常见事件,包括键盘输入、鼠标移动以及加载结束。

第一个需要监听的事件是window对象的load事件。该事件在HTML页面加载结束时发生。

要为事件添加一个监听器,可以使用DOM的对象的 addEventListener()方法。因为window代表HTML页面,所以它是最高级别的DOM对象。

addEventListener()函数接受以下3个参数。(1)load事件。

这是监听器的事件名称。对于诸如window的已有对象的事件已经预先定义过。(2)eventWindowLoaded()事件处理器函数。

当事件发生时调用这个函数。在代码中会调用canvasApp()函数来开始执行主应用程序。(3)useCapture:true或false。

这个参数设置函数是否在事件传递到DOM对象树的底层对象之前捕捉此种类型的事件。此处始终设为false。

下面是用来测试window是否加载完毕的最终代码。window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded (){  canvasApp();}

另外,也可以用许多其他方式为load事件设置事件监听器。window.onload = function()  {    canvasApp();  }

或者使用如下代码。window.onload = canvasApp;

本书使用第一种方法。1.6.1 为Canvas封装JavaScript代码

前面已经创建了一种测试HTML页面是否加载完毕的方法,下面开始创建JavaScript应用程序。因为JavaScript在HTML页面中运行,所以它可以与其他JavaScript应用程序和代码一起运行。通常,这不会导致什么问题。但是,可能会出现一种情况,即代码中的变量或者函数会与HTML页面中的其他JavaScript代码产生冲突。

Canvas应用程序与在浏览器中运行的其他应用有所不同。由于Canvas只在屏幕上特定的区域执行并显示结果,可以说它的功能是独占的,因此不太会受到页面上其他内容的影响,反之亦然。读者如果想在同一个页面上放置多个Canvas应用,那么在定义JavaScript代码时必须将对应的代码分开。

为避免出现这个问题,可以将变量和函数都封装在另一个函数中。JavaScript函数本身就是对象,Javascript对象既可以有属性也可以有方法。将一个函数放到另一个函数中,读者可以使第二个函数只在第一个函数的局部作用域中。

在示例中,从window load事件中调用的canvasApp()函数将包含整个Canvas应用程序。“Hello World!”示例中将会有一个名为drawScreen()的函数。一旦canvasApp()被调用,则立即调用drawScreen()来绘制“Hello World!”文本。

drawScreen()函数现在是canvasApp()的局部函数。在canvasApp()中创建的任何变量或函数对于drawScreen()来说都是局部的。但是,对于HTML页面的其余部分或其他可能运行的JavaScript应用程序来说却并非如此。

以下是如何封装函数的示例代码,也是Canvas应用程序的代码。function canvasApp(){  drawScreen();  ...  function drawScreen(){    ...  }}1.6.2 将Canvas添加到HTML页面中

在HTML的部分添加一个标签时,可以参考以下代码。 Your browser does not support HTML5 Canvas.

现在,小结一下正在讨论的内容。标签有3个主要属性。在HTML中,属性被设在尖括号括起来的HTML标签中。这3个属性分别如下。● id:id在JavaScript代码中用来指示特定标签的名字,

如canvasOne。● width:画布宽度,以像素为单位。width将设为500像素。● height:画布高度,以像素为单位。height将设为300像素。

提示HTML5元素(包括canvas)还有很多属性,如tabindex、

title、class、accesskey、dir、draggable、hidden等。

在开始标签和结束标签中间可以添加文本,一旦浏览器执行HTML页面时不支持Canvas,就会显示这些文字。以本章的Canvas应用程序为例,这里将使用文本“Your browser does not support HTML5 Canvas(你的浏览器不支持HTML5 Canvas)”。实际上,此处可以放置任意文字。

在JavaScript中使用document对象引用Canvas元素

接下来,用DOM引用HTML中定义的标签。document对象加载后可以引用HTML页面的任何元素。

这里需要一个Canvas对象的引用,这样就能够知道当JavaScript调用Canvas API时其结果在哪里显示。

首先定义一个名为theCanvas的新变量,用来保存Canvas对象的引用。

接下来,通过调用document的getElementById()函数得到canvasOne的引用。canvasOne是在HTML页面中为创建的标签定义的名字。var theCanvas = document.getElementById("canvasOne");1.6.3 检测浏览器是否支持Canvas

现在已经得到了HTML页面上定义的canvas元素的引用,下面就需要检测它是否包含环境。Canvas环境是指支持Canvas的浏览器定义的绘图界面。简单地说,如果环境不存在,画布也不会存在。有多种方式可以对此进行验证。前面已经在HTML页面中定义了Canvas。第一种方式是在调用Canvas的getContext方法之前,检测Canvas对象以及getContext方法是否存在。if (!theCanvas || !theCanvas.getContext){  return;}

实际上,这段代码测试了两件事:第一,它测试theCanvas是否包含false(如果命名的id不存在,document.getElementById()将返回此值);第二,它测试getContext()函数是否存在。

如果测试失败,那么return语句将中断程序执行。

另一个方法是创建一个函数,在其中创建一个虚拟画布,以此来检测浏览器是否支持。这个方法是由Mark Pilgrim在他的HTML5网站创建并流行起来的。function canvasSupport (){  return !!document.createElement('canvas').getContext;}function canvasApp(){   if (!canvasSupport){   return; }}

作者最喜欢的方法是使用modernizr.js库Modernizr是一个易用并且轻量级的库,可以检测各种Web技术的支持情况。Modernizr创建了一组静态的布尔值,可以检测是否支持Canvas。

为了在HTML页面中包含modernizr.js,可以从http://www.modernizr.com/的空口下载代码并将外部.js文件包含到HTML页面中。

为了检测是否支持Canvas,将canvasSupport()函数进行修改,如下所示。function canvasSupport (){  return Modernizr.canvas;}

这里将要使用modernizr.js方法,因为它提供了测试Web浏览器是否支持Canvas的最佳途径。1.6.4 获得2D环境

最后需要得到2D环境的引用才能够操作它。HTML5 Canvas被设计为可以与多个环境工作,包含一个建议的3D环境。不过,本书只需得到2D环境。var context = theCanvas.getContext("2d");1.6.5 drawScreen()函数

现在便可以创建实际的Canvas API代码了。在Canvas上运行的各种操作都要通过context对象,因为它引用了HTML页面上的对象。

在后面几章中,本书将深入讲解如何在HTML5 Canvas中绘制文本、图形和图像等内容,所以现在只需花一点点时间来了解drawScreen()函数的代码。

这里说的“屏幕”实际上就是定义的画布绘图区域,而不是整个浏览器窗口。之所以将它称为屏幕,是因为在编写游戏或应用程序时,它就是在操作画布时的显示窗口或屏幕。

首先要做的事情是清空绘图区域。下面的两行代码在屏幕上绘制出一个与画布大小相同的黄色方块。fillStyle()设置了颜色,fillRect()创建了一个矩形,并把它放到了屏幕上。context.fillStyle = "#ffffaa";context.fillRect(0, 0, 500, 300);

提示注意,这里调用了context的函数。没有屏幕对象、颜

色对象或者其他对象。这就是之前描述的即时模式的示例。

下一章将讨论Canvas的文本函数,这里只是简单地浏览将“Hello World!”文本放到屏幕上的代码。

首先,使用与设置矩形颜色相同的方法设置文本的颜色。context.fillStyle = "#000000";

然后,设置字体的大小和字号。context.font = "20px Sans-Serif";

接下来,设置字体的垂直对齐方式。context.textBaseline = "top";

最后,通过调用context对象的fillText()方法将测试文本显示到屏幕上。这个方法的3个参数分别是是文本字符串、x坐标和y坐标。context.fillText ("Hello World!", 195, 80);

下面给“Hello World!”文本添加图形。首先,加载一个图像并将它显示出来。第4章将深入讨论图像及其操作,现在仅仅要做的就是显示一个图像到屏幕上。为了将图像显示到画布上,需要创建一个Image()对象的实例,并且将Image.src属性设为将要加载的图像的名字。

提示读者也可以将其他画布或者视频当作图像显示出来。本

书会在第4章和第6章讨论相关主题。

在显示图像之前,需要等待图像加载完毕。设置Image对象的onload函数可以为Image load事件创建一个匿名的回调函数。这个匿名的回调函数将在onload事件发生时被执行。当图像加载完毕,调用context.drawImage()并传输3个参数将图像显示到画布上:Image对象、x坐标以及y坐标。var helloWorldImage = new Image(); helloWorldImage.onload = function () {   context.drawImage(helloWorldImage, 160, 130); }helloWorldImage.src = "helloworld.gif";

最后,围绕文本和图像绘制一个方块。为了绘制方块而不填充,可以使用context.strokeStyle属性设置方块边框的颜色,然后调用context.strokeRect()方法绘制矩形边框。strokeRect()的4个参数分别是:左上角的x坐标和y坐标,以及矩形的宽度和高度。context.strokeStyle = "#000000";context.strokeRect(5, 5, 490, 290);

完整的HTML5“Hello World!”应用程序代码如例1-3所示,结果如图1-3所示。

例1-3 HTML5 Canvas下的“Hello World!” CH1EX3: Your First Canvas Application

Your browser does not support HTML5 Canvas.
图1-3 HTML5 Canvas下的“Hello World!”1.7 用console.log调试

在超越“Hello World!”去探索更强大更丰富的内容前,还有些内容需要讨论。本书通过使用现代Web浏览器的console.log功能实现了一个简单的调试方法。这个函数可以通过代码在JavaScript控制台中记录文本信息日志,从而可以帮助用户找出问题(或者机会)。每个浏览器都有一个可以使用console.log的JavaScript控制台(Chrome、Opera、Safari、安装Firebug的Firefox等)。同时,那些不支持console.log的浏览器将弹出讨厌的错误提示。

为了处理这个错误,可以用一个外壳将console.log包装一下,使其只在浏览器支持的情况下被调用。这个外壳创建了一个名叫Debugger的类,然后创建一个在任何位置都可以被调用的Debugger.log静态函数,如下所示。Debugger.log("Drawing Canvas");

以下是console.log()函数的代码。var Debugger = function (){ };Debugger.log = function (message){  try {   console.log(message);  } catch (exception){   return;  }}1.8 2D环境及其当前状态

通过调用Canvas对象的getContext()方法可以获得HTML5的2D环境对象(Canvas RenderingContext2D对象)。所有操作都要通过该对象进行。CanvasRenderingContext2D对象包含了在画布上绘图所需的所有方法和属性。CanvasRenderingContext2D(简称环境,后同)采用画布左上角为原点(0,0)的笛卡尔坐标系,坐标轴向右、向下为正方向。

然而,所有这些属性和方法都与当前状态关联使用。当前状态是一个必须掌握的概念。它可以帮助读者真正理解HTML5 Canvas的工作方式。实际上,当前状态是一个绘制状态的堆栈,这些状态可以应用到整个画布。在画布上绘制时将操作这些状态。主要包括以下状态。● 变换矩阵:缩放、旋转、变换以及平移的方法。● 裁切区域:通过clip()方法创建。● 上下文属性:包括strokeStyle、fillStyle、globalAlpha、lineWidth、

lineCap、line、Join、miterLimit、shadowOffsetX、

shadowOffsetY、shadowBlur、shadowColor、global、

CompositeOperation、font、textAlign和textBaseline。

不必担心,虽然读者现在还不熟悉这些属性,但是后面3章将深入讨论这些属性。

读者是否还记得本章前面讨论的即时模式与保留模式?Canvas是一个即时模式的绘图界面,这就意味着如果什么东西发生了变化就需要即时重新绘制。这样做有以下好处:例如,全局属性很容易将效果应用到整个屏幕。一旦读者想好了,每次重新绘制屏幕的动作都有一个直接并且简单的画布绘制更新过程。

另一个方面,保留模式采用一个绘制界面储存一组对象,并通过一个显示列表来操作。Flash和Silverlight就是使用这种模式。如果应用程序依赖多个拥有独立状态的对象,使用保留模式创建应用程序会很有用。许多能够充分利用画布功能的应用程序(如游戏、活动、动

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载