基于新信息技术HTML5和CSS3网页设计进阶教程课件.pptx

1、第1章 HTML5的重要使命1.1 Web时代的变迁时代的变迁1.2 HTML5的目标的目标1.3 HTML5的新功能的新功能基于新信息技术的基于新信息技术的HTML5和和CSS3网页设计进阶教程网页设计进阶教程1.1 Web时代的变迁时代的变迁Web(World Wide Web)即全球广域网，也称为万维网，它和我们经常说的“互联网”是两个联系极其紧密但却不尽相同的概念。互联网是通过一组通用协议互相连接在一起的计算机网络，而Web是运行在互联网上的一个超大规模的分布式系统。Web的设计初衷是一个静态信息资源发布媒介，通过超文本标记语言(HTML)描述信息资源，统一资源标识符(URI)定位信息

2、资源，超文本转移协议(HTTP)请求信息资源。HTML、URL和HTTP三个规范构成了Web的核心体系结构，是支撑Web运行的基石。Web是人类伟大的发明之一，也是计算机影响人类的表现之一。1.1.1 Web1.0Web1.0的主题是信息共享。Web设计的初衷是用于科学家之间共享和传递信息，后来被一些大公司看到了其中所蕴含的巨大商业价值，他们开始将自己的商品及联系方式放到Web上进行展示，并取得了巨大的成功。随后，各种公司蜂拥进入Web宣传、推广自己的产品，Web用户进入一个快速增长期。随着进入Web的商家越来越多，Web也开始逐步走向商业化的道路。Web1.0是Web技术发展的第一个阶段，局

3、限于当时的硬件条件及网络环境，网站主要以静态页面技术为主。大部分网站以纯HTML语言编写，由文字和图片组成，制作形式以表格为主，内容以网站编辑为主导，用户能够看到的内容是网站编辑处理后的。这个过程是网站向用户单向传递信息，网站负责展示信息，用户负责浏览信息，因此也有人将Web1.0时代称为“只读的时代”。1.1.2 Web2.0Web2.0的主题是信息共建。Web1.0只解决了人对信息搜索、聚合的需求，而没有解决人与人之间沟通、互动和参与的需求。因此，为了满足广大网民的需求，Web2.0应运而生。Web2.0的代表应用有以新浪微博为代表的博客网站、以土豆优酷为代表的视频网站、以QQ空间为代表的

4、个人空间网站、以豆瓣为代表的评论网站等。打开这些网站，你会发现它们都有以下一些共同的特点：内容大多都是由用户自主创造的，突出个人观点及个性化。重视网站用户体验，网站具有漂亮的外观、简易的操作性及快速的响应速度。突出用户参与度，可读可写。Web2.0相比Web1.0的最大改变是，加强了网站与用户之间的互动，网站内容主要由用户提供，网站的诸多功能也由用户参与建设，实现了网站与用户的双向互动交流。1.1.3 Web3.0目前，Web3.0还只是一个业内人士之间的概念词语。业内对Web3.0的解释有很多，其中最常见的一种解释是用户可以在Web上拥有自己的数据，并且在多家网站中使用这些数据，完全基于We

5、b，用浏览器即可实现复杂系统程序才能实现的系统功能，用户数据在被审计后，同步于网络数据。也就是说，在Web3.0时代，用户在Web上将拥有自己的身份，使用这个身份信息，可以登录各种不同的网站；用户也将不再是在某个网站上传自己的作品，而是将这些作品上传到Web中，再给某个网站授权，以达到在该网站发布作品的目的。另外，用户参与互联网的创作其实也算是一种劳动，这种劳动在Web2.0时代是无法直接带给用户经济利益的，只有当用户的创作获得了一定的认可度后才能通过其他方式获得劳动报酬。这种现象在Web3.0时代将会有所改变，人们参与到互联网的劳动中，特别是在内容上的创造，将会获得更多的荣誉、认同，包括财富

6、和地位。其实，这些在现在的Web中已经有所体现，只不过很少有人关注。现在的很多网站，用户可以不用注册而通过其他网站的账号，如QQ号、支付宝账号等直接登录；发布于某个网站的内容，可以通过转载或引用等方式直接发布到另外的网站上；某些网站提供积分、虚拟币等方式，当用户的积分或虚拟币达到一定数量后可以兑换成人民币等。这些新出现的Web模式已经有了Web3.0的特征，当条件达到一定支持度时，Web3.0将会不知不觉地来到我们的身边。当然，Web3.0的这些特征都还处在概念阶段，至于真正到来的Web3.0具有哪些特征，只有当我们真正处于那个时代时才能进行总结、归纳。但不论如何，Web发展的脚步是不会停下的

7、，新的时代必将会来临。1.2 HTML5的目标的目标1.2.1 HTML的发展历程的发展历程1993年6月，互联网工程工作小组(IETF)发布了一份工作草案“超文本标记语言(第一版)”，这被认为是HTML的第一个版本，但它并不是一个成型的标准，因为当时有很多不同的版本。2007年，W3C从WHATWG接手相关工作，重新开始发展HTML5，而此时的W3C同时进行着两套规范的制定工作：XHTML2和HTML5。直到2009年，W3C宣布终止XHTML2的相关工作，HTML5开始逐渐进入广大开发者的视野中。2014年10月29日，W3C宣布，经过近8年的艰辛努力，HTML5标准规范终于最终制定完成了

8、，并已公开发布。1.2.2 HTML5要解决的问题要解决的问题HTML5将取代HTML4.01、XHTML1.0标准，在互联网应用迅速发展的今天，使网络标准符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。它将成为开放Web平台(Open Web Platform)的基石，进一步推动更深入的跨平台Web应用的发展。同时，HTML5还解决了HTML历史遗留的几个大问题。HTML4.01没有考虑到Web的发展如此迅猛，在标准中没有提供对视频、动画和声音的支持，而Web这方面的需求被浏览器插件补充了。想要在网页中播放视频或者声音，只能通过第三方插件实现，而其中最为著名的是Adobe公司提供

9、的第三方插件“Adobe Flash Player”，久而久之，这个部署在亿万浏览器里的商业插件俨然成为了HTML中的另外一个标准。除了Flash这个商业产品成为事实标准，HTML4.01标准还面临一个问题，那就是另一个扩展标准的制定者IE。当时的IE在浏览器市场中占有绝对的统治地位，并且扩展了大量的仅IE支持的“IE Only”语法，比如IE默认的脚本语言是JScript，它跟标准脚本语言JavaScript在功能和语法虽然大致相同，但在细节上还是有着一些差别，这就导致Web程序员不得不痛苦地为IE及其他浏览器编写两种脚本。浏览器不兼容现象由此而来，很多网站甚至只能使用IE进行浏览。就这样，

10、整个Web世界被两大IT巨头微软和Adobe绑架了。Web企业每年不得不向IE和Adobe缴纳巨额的费用来使用它们的产品。最终，IT巨头们都坐不住了，既然HTML4.01无法解决这个问题，那么就用新的标准来解决吧，而这个新的标准就是HTML5。HTML5就这样诞生了。1.3 HTML5的新功能的新功能1.3.1 无插件范式无插件范式过去，很多功能只能通过插件或者复杂的hack(针对原程序文件的直接修改)来实现，但在HTML5中，提供了对这些功能的原生支持。比如过去只能通过Flash播放视频和声音，而现在HTML5提供了video和audio元素来对视频和声音进行支持；再比如过去想在页面中画出某

11、些图形是非常困难的，而现在有了canvas元素就能很轻易地实现了。现在的Web开发人员不需要再依赖插件就能制作出效果绚丽、功能强大的页面了。1.3.2 新的新的DOCTYPE和字符集和字符集HTML5对HTML代码规范进行了大量的简化操作，使得Web页面的代码更加精简、高效。如Web页面的DOCTYPE就被极大地简化了。以前的DOCTYPE有很多的版本，以下列举几个常见的DOCTYPE：HTML 4.01 Strict这些谁能够记得住？一般来说，在新建页面时，开发工具会直接为页面添加默认的DOCTYPE，而开发人员如果需要用到其他类型的DOCTYPE，则需要通过复制、粘贴来进行更换，这无疑又给

12、开发人员增加了工作量和工作难度。HTML5干净利落地解决了这一问题：现在的DOCTYPE非常简单，相信你读两三遍就能背下它。跟DOCTYPE一样，字符集的声明也被简化了。过去，设置字符集为UTF-8是这样写的：现在的写法是：1.3.3 新的新的HTML元素元素HTML5不仅仅是把现有的标记进行了简化，使它们更加简短，它还定义了一批新的元素，扩展出了许多新的功能。表1-1列举了几个比较常用的新元素。1.3.4 新的输入类型和属性新的输入类型和属性HTML5不仅定义了一批新的元素，还为input元素提供了许多新的输入类型。比如在过去，我们想要创建一个优秀的时间选择输入框，需要写非常多的代码或者使用

13、第三方提供的插件，但在HTML5中，我们只需一条命令就能实现：表1-2列举出了HTML5新增的输入类型。同时，HTML5还添加了许多input元素的属性，提供更多便利功能，如表1-3所示。1.3.5 简化页面元素查找方式简化页面元素查找方式HTML5在document对象中引入了一种新的页面元素查找方式，使用这种方式，可以更加精确地获取想要获取的页面元素而不必再使用标准DOM获取所有元素再遍历查找。我们来对比一下HTML5出现前后页面元素查找方法的区别，如表1-4和表1-5所示。例1-1 页面中有一个表格，鼠标点击某个单元格时改变单元格背景颜色为红色。改变点击单元格背景颜色的代码如下：从上面的

14、代码可以看出，核心代码是：通过一行代码即可找到点击表格时鼠标所悬停的单元格，这在以前是不可想象的。相比HTML4.01，HTML5的新功能实在太多了，我们很难一一列举出来，那么接下来请你跟随我们的脚步开始HTML5新功能的探索旅程吧。第2章 HTML5的多媒体2.1 容器格式和编容器格式和编/解码格式解码格式2.2 浏览器支持特性检测浏览器支持特性检测2.3 视频、音频的脚本控制视频、音频的脚本控制2.4 HTML5中的音频中的音频2.5 HTML5中的视频中的视频2.1 容器格式和编容器格式和编/解码格式解码格式2.1.1 视频、音频的容器视频、音频的容器我们常见的视频文件的扩展名有mkv、

15、avi、mp4等，音频文件的扩展名有mp3、wav等，其实这些仅仅只是容器的格式，它们类似于压缩了一组文件的压缩包文件。对于一个视频文件(视频容器)，一般包含了视频轨道、音频轨道及其他一些元数据，如图2-1所示。目前，视频文件(视频容器)种类有很多，此处只列举一些最常见的：Audio Video Interactive(.avi)Flash Video(.flv)MPEG-4(.mp4)Matroska(.mkv)Ogg(.ogv)WebM(.webm)2.1.2 视频、音频的编视频、音频的编/解码器解码器视频、音频的编/解码器其实就是一组算法，用来对视频或音频进行编码和解码。对视频和音频进行

16、编码，是为了它们能够快速地传播。需要注意的是，不同容器格式对应的编/解码器是不同的。常见的音频编/解码器如下：ACC MPEG-3 Ogg Vorbis常见的视频编/解码器如下：H.264 VP8 Ogg Theora有些编/解码器是免费的，有些则受专利保护，需要付费，虽然HTML5很想统一指定编/解码器，但实施起来却困难重重，最后不得不放弃对编/解码器的要求。因此而引发的问题就是各种不同的浏览器对视频格式的支持是有区别的，后面我们将会详细讲解。Web开发人员只能熟悉各种浏览器对视频和音频编/解码器的支持情况，并针对不同的浏览器环境嵌入不同的源文件。相信随着HTML5的发展，HTML5对不同编

17、/解码器的支持程度会越来越高，最终支持任何格式的视频文件。2.2 浏览器支持特性检测浏览器支持特性检测video和audio元素是HTML5的新元素，它们的可用性被有意地设计为不需要任何脚本来进行检测。你可以设置多个源文件，支持HTML5新特性的浏览器会自动选择一个它所支持的视频格式来进行播放，而不支持HTML5新特性的浏览器(目前除了IE8及之前的版本，其余都支持HTML5)会完全忽略掉这两个元素。根据这一特点，我们在一般页面制作中只需要在video或audio元素中写入提示信息即可。向页面中插入视频和音频的完整代码如下：如果支持HTML5的浏览器，如Chrome则会显示如图2-2所示的内容

18、。图2-2 支持HTML5浏览器显示audio及video元素 如果不支持HTML5的浏览器，如IE8则会显示如图2-3所示的内容。图2-3 不支持HTML5浏览器显示audio及video元素但是，如果你想要任何页面都能正确打开所制作的视频播放页面或者你需要对视频做更多的操作，就需要使用JavaScript。检测浏览器是否支持video和audio元素，我们可以用以下JavaScript函数来进行。检测页面是否支持video的代码如下：如果浏览器支持video及audio元素，则被创建的元素对应的DOM对象会有一个名为canPlayType()的方法，反之，该对象只会拥有一些所有元素都具有的

19、公共属性。我们先动态创建一个需要检测的对象，检测canPlayType()方法是否存在，再通过“!”运算符将结果转换成bool值，就可以检测出元素是否被支持。如果检测到浏览器不支持video或audio元素，那么我们可以使用JavaScript向页面嵌入媒体标签来引入想要播放的视频。虽然同样可以用脚本控制媒体，但是使用的是诸如Flash等其他播放技术。2.3 视频、音频的脚本控制视频、音频的脚本控制HTML5 DOM为audio和video元素提供了方法、属性和事件。这些方法、属性和事件允许我们使用JavaScript来操作audio和video元素，开发人员可以基于这些方法、属性和事件自行开

20、发媒体播放用户界面，制作属于自己的视频或音频播放器。列举一些常用的方法和属性如表2-1表2-4所示。2.4 HTML5中的音频中的音频2.4.1 audio元素的基本操作元素的基本操作在下面的代码中，我们创建一个页面，页面中有一个播放器，其中加载了一首歌曲，点击播放按钮就能播放歌曲。歌曲播放页面的完整代码如下：这段代码中，在页面中嵌入了一个名为“audio.mp3”的音频文件，它和HTML文档在同一个路径下。在Chrome浏览器中打开的效果如图2-4所示，在图中可以看到一个音频播放器，它有播放/暂停按钮、播放时间/总播放时间、播放进度条、声音控制滑动条及更多操作按钮(展开后有一个下载按钮，有些

21、浏览器会直接显示为下载按钮)。这是HTML5默认音频播放器，支持audio元素的不同浏览器显示的外观有区别，但功能基本一致。图2-4 简单音频播放页面在上面的代码中，向页面中嵌入音频的代码为：代码中，src属性用于告诉浏览器播放的声音的数据源位置；controls属性告诉浏览器显示用户控件，如果不设置显示用户控件，则页面上将不会显示播放器，当然你也无法开始播放音乐，除非你设置音乐自动播放；开始标签和结束标签中间的文字用于为不支持audio元素的浏览器提供替代显示内容，当然，这些文字你也可以将它设置为Flash播放器等播放插件，或者直接给出播放源文件的链接地址。标签有很多属性，用于为音频提供更多

22、的设置，如表2-5所示。例2-1 制作一个带有背景音乐的页面。带有背景音乐页面的完整代码如下：代码非常简单，思路也不难，背景音乐有几个特点：(1)打开页面后，背景音乐会自动播放；(2)背景音乐不需要显示音乐播放控制器；(3)背景音乐应该循环播放。总结了背景音乐的特点后，我们就能很容易地为页面添加背景音乐了。首先使用audio元素在页面中嵌入一个音频，使用autoplay属性设置页面加载完成后自动播放歌曲；不加入controls属性，页面中则不会生成播放控制器；使用loop属性设置音乐循环播放。一般设置背景音乐的目的是给页面渲染某种氛围，但是大部分用户对页面背景音乐比较反感，这个时候可以考虑在页

23、面中添加一个按钮来设置背景音乐的打开或关闭，利用按钮或超链接关联JavaScript来控制audio元素，在页面body元素中添加以下代码可加入背景音乐控制按钮。在例2-1制作的页面的audio元素后面添加如下代码：2.4.2 使用使用source元素元素前面我们已经介绍过，音频的格式有很多，而HTML5中的audio元素支持的音频格式只有3种：Ogg Vorbis(.ogg)、MP3(.mp3)、Wav(.wav)。因为涉及专利权和特许权使用费等法律和财务问题，不同浏览器对视频格式的支持是不同的。我们可以通过表2-6看到主流浏览器对音频格式的支持情况。由表2-6可以看到，没有一种格式的音频文

24、件是所有主流浏览器所支持的，如果想要让任何浏览器打开你的页面都能播放音频的话，至少需要在页面中嵌入两种不同格式的音频文件。HTML5标准也考虑到了这个问题，可以为一个audio元素设置多个源文件，格式如下：2.4.3 浏览器支持音频格式检测浏览器支持音频格式检测我们可以通过JavaScript检测技术来检测浏览器的音频格式支持情况。我们先来看看下面这段测试浏览器是否支持.ogg类型的代码。在2.2浏览器支持特性检测章节中，我们已经了解了如何检测浏览器是否支持audio元素，因此上面的代码直接使用我们提供的isSupportAudio()方法来判断浏览器是否支持audio元素，如果浏览器不支持a

25、udio元素，则肯定无法播放音频，直接返回false。接下来使用 createElement()方法创建一个audio元素，然后调用它的canPlayType()方法，将Ogg Vorbis类型的参数传入，测试audio能否播放.ogg格式的音频文件。probably：表示浏览器有充分的把握可以播放此格式。maybe：表示浏览器有可能可以播放此格式。空字符串：表示浏览器无法播放此格式。因此，在使用我们提供的方法判断能否播放某种格式的音频时，应该判断返回值不为空则表示可以播放。如判断能否播放.mp3格式文件：2.5 HTML5中的视频中的视频2.5.1 video元素的基本操作元素的基本操作在下

26、面的代码中，我们创建了一个页面，页面中有一个播放器，其中加载了一个视频，点击播放按钮就能播放视频。视频播放页面的完整代码如下：看到这段代码是不是很熟悉？没错，在页面中嵌入视频和嵌入音频的代码基本一样，差别只是标签名和数据源的格式不同而已。在上面的代码中，我们在页面中嵌入了一个名为video.mp4的视频，这是最近非常流行的一首歌曲的MV。Chrome浏览器打开的效果如图2-5所示。图2-5 视频播放页面从图2-5中可以看到，视频播放器和音频播放器一样有播放/暂停按钮、播放时间/总播放时间、播放进度条、声音控制滑动条及更多操作(下载)等按钮，另外还多了一个全屏模式按钮和画面。通过上面的图片及分析

27、代码可以看到，视频并没有播放，而等待画面是视频的第一帧。在上面的代码中，向页面中嵌入视频的代码为：代码与嵌入音频相似，因此这里不再赘述。我们直接来看看video元素有哪些属性吧。video属性如表2-7所示。与audio属性进行对比，video属性多了3个：height、width和poster。可以发现，这3个属性都是和画面有关，其中需要注意的是：对于视频来说，同时设置height和width只能设置播放器的高度和宽度，并不会改变视频画面的长宽比。因此，我们一般只设置height和width中的一个即可。请记住每次在页面嵌入视频时都要设置height或width，否则页面加载完成时视频播放器

28、只会默认大小，等加载了视频后视频播放器会扩大，将有一个从小到大的闪现变化，且视频的大小会根据视频分辨率发生变化，不利于页面布局。poster与autoplay属性一般不同时出现，因为设置视频自动播放时，视频的封面图片会一闪而过，就失去了设置它的意义。poster与preload=meta属性设置一般同时出现，这样可以为网页用户节省流量，提高网页打开速度。2.5.2 使用使用source元素元素和audio元素相似，目前video元素支持的视频格式也是3种：Ogg Vorbis(.ogg)、MPEG-4(.mp4)、WebM(.webm)。各主流浏览器对视频格式的支持如表2-8所示。通过表2-8

29、可以看到，除了Chrome浏览器支持所有的视频格式外，其他主流浏览器都只支持3种格式中的一种或两种。如果想要让任何浏览器打开你的页面都能播放视频的话，至少需要在页面中嵌入两种不同格式的视频文件。同audio元素一样，我们可以使用source元素为一个video元素设置多个源文件，格式如下：2.5.3 浏览器支持视频格式检测浏览器支持视频格式检测视频格式支持与音频格式支持类似，前面我们已经了解了音频格式检测的方法，因此此处不再赘述，只展示检测代码。检测是否支持.ogg类型的代码如下：使用我们提供的方法判断能否播放某种格式的视频，如判断能否播放.mp4格式文件如下：第3章 HTML5的拖放3.1

30、浏览器支持检浏览器支持检测测3.2 实现简单拖实现简单拖放放3.3 拖放相关的属性和事拖放相关的属性和事件件3.4 dataTransfer对对象象3.5 拖放图片到浏览器拖放图片到浏览器3.1 浏览器支持检测浏览器支持检测Internet Explorer 9、Firefox、Opera 12、Chrome以及 Safari 5 支持拖放。我们可以通过以下代码来测试浏览器是否支持HTML5拖放特性。3.2 实现简单拖放实现简单拖放例3-1 拖动前页面效果如图3-1所示，页面中有一个方框，方框下有一张图片，将图片拖动放入方框中。图3-1 拖动前页面效果拖动效果实现代码如下：拖放后页面效果如图3

31、-2所示。图3-2 拖动后页面效果实现拖动的思路是：当光标在图片上按住鼠标左键进行移动时，将被该图片元素的id存入dataTransfer对象中；当光标移动到目标div元素中放开鼠标左键时，将被记录了id的图片元素设置为该div元素的子元素。在这个过程中，我们称被拖动的元素为源元素，拖动的目的地为目的地元素。同时，目的地元素默认拒绝接收被拖放的元素，我们在页面拖动元素的过程中，需要通过preventDefault()方法关闭目的地元素默认行为。在上面的代码中，首先是题目提供的内容：一张图片和一个div元素。其代码如下：当鼠标左键在目的地元素内松开时，关闭目的地元素的默认行为，再从dataTra

32、nsfer对象中将保存在其中的id取出来，通过此id找到源元素，再将源元素设置为目的地元素的子元素。编写以下JavaScript代码，绑定到目的地元素的ondrop事件。3.3 拖放相关的属性和事件拖放相关的属性和事件1.拖放相关的属性拖放相关的属性要实现元素的拖放，需要先设置元素的draggable=true属性，即将元素设置为可拖放。在上面的例子中并没有设置这个属性，因为链接和图片默认是可拖放的，不需要设置draggable 属性。属性设置语法如下：true:可以拖动。false:禁止拖动。auto:跟随浏览器定义是否可以拖动。2.拖放相关的事件拖放相关的事件与拖放相关的元素有两个，在拖放

33、的过程中会分别触发如表3-1所示的事件。ondragenter、ondragover和ondrop事件的默认行为是拒绝接收任何被拖放的元素，因此，我们必须阻止浏览器这种默认行为。通过event.preventDefault()方法可以阻止浏览器默认行为(对于火狐浏览器，需要使用event.stopPropagation()方法阻止浏览器默认行为)。3.4 dataTransfer对象对象1.dataTransfer对象的属性对象的属性dataTransfer对象列入标准的属性有4个，如表3-2所示。2.dataTransfer对象的方法对象的方法dataTransfer对象列入标准的方法有4个

34、，如表3-3所示。3.5 拖放图片到浏览器拖放图片到浏览器HTML5可以实现从本地拖放文件到浏览器中，利用FileReader对象读取文件，并进行后续操作。此功能一般应用在图片拖放和文件上传操作中，将本地图片拖放并显示到页面指定位置或为文件选择控件提供直接拖放功能。例3-2 拖动本地图片放入页面指定的位置。拖放图片到浏览器的代码如下：拖入图片前页面显示效果如图3-3所示，拖入图片后页面显示效果如图3-4所示。图3-3 拖入图片前页面显示图3-4 拖入图片后页面显示需要注意的是：拖动本地文件到浏览器，当浏览器支持拖放文件格式时，浏览器默认会打开本地文件；当浏览器不支持拖放文件格式时，浏览器会默认

35、触发下载器下载该文件。同时，不同浏览器打开本地文件的方式有所不同。Chrome：如果该文件是浏览器可浏览文件(图片等)，浏览器会在当前窗口打开文件的预览。FireFox：如果该文件是浏览器可浏览文件(图片等)，浏览器会在新窗口打开文件的预览。IE：如果该文件是浏览器可浏览文件(图片等)，浏览器会在当前窗口打开文件的预览。要阻止浏览器的默认行为，直接为目的地元素添加事件的方法是不行的，只能通过JavaScript在页面加载完成后为目的地元素追加相应方法。关键代码如下：在ondrop事件中，先阻止元素的默认行为；再通过dataTransfer对象获取文件列表，因为我们只拖动一个图片文件，因此可以直

36、接通过下标0找到文件，获取文件类型；然后创建一个img元素和一个FileReader对象；接下来判断获取的文件类型是否支持img元素，如果不支持，则给出提示并返回；如果img元素支持文件类型，则使用FileReader对象读取文件地址并赋值给img元素，并将该img元素添加为目的地元素的子元素；最后通过FileReader对象的readAsDataURL()方法将读取到的文件编码成Data URL置于页面中。其代码如下：第4章 HTML5的绘图4.1 canvas API简简介介4.2 浏览器支持检浏览器支持检测测4.3 什么是什么是canvas4.4 canvas中的坐中的坐标标4.5 在在

37、canvas上绘图上绘图4.1 canvas API简介简介canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。没有canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了canvas，我们就再也不需要Flash了，可以直接使用JavaScript完成图形绘制。4.2 浏览器支持检测浏览器支持检测Internet Explorer 9、Firefox、Opera、Chrome以及Safari支持canvas元素及其属性和方法，Internet Explorer 8以及更早的版本不支持ca

38、nvas元素。和其他HTML5元素一样，在支持canvas元素的浏览器中，canvas元素里面的内容是不会显示的，但是在不支持的情况下，会显示出来。于是，我们可以把它作为提示用语，用来在不支持canvas元素的浏览器中进行提示。方法如下：一般来讲，创建canvas元素并检查getContext属性就可以检测浏览器是否支持canvas元素，但是在一些浏览器下不够准确，所以再检测一下elem.getContext(2d)的执行结果，就可以完全确定。关于canvas元素，有一点要补充的，那就是fillText方法。尽管浏览器支持canvas元素，但是我们并不能确定它是否支持fillText方法。检测

39、支持fillText的方法如下：4.3 什么是什么是canvascanvas只是HTML5中的一个标签而已，可定义一个画布，它本身没有任何作用，就相当于是一个矩形区域的画板，在画板上没有任何东西，但是你可以使用JavaScript在它上面画任何你想画的东西，你可以控制其上的每一个像素。它默认的宽度为300px，高度为150px，背景为透明色。canvas是支持样式控制的，比如设置边框、边距、背景等，但是有一个地方值得注意：在设置canvas宽度和高度时，如果用style样式来设置，会把图像进行拉伸，因此请注意时刻为canvas元素设置宽度和高度。例如：页面显示效果如图4-1所示。图4-1 ca

40、nvas元素是行内元素的表现4.4 canvas中的坐标中的坐标canvas中的坐标与HTML标准坐标一致，即左上角为(0，0)，右下角为设置的宽度及高度(x，y)；(0，0)点称为原点，也叫初始点，即绘图开始的位置。如以下代码：在页面中的表现如图4-2所示。图4-2 canvas中的坐标4.5 在在canvas上绘图上绘图例4-1 在canvas上绘制一个矩形。在canvas上绘制一个矩形的代码如下：在上面的代码中，我们先在页面中放置了一个canvas元素，设置元素的宽度为1000px，高度为800px，id为canv；再通过CSS为该元素添加一个灰色的背景色；然后通过JavaScript在

41、canvas中绘制一个矩形。核心代码如下：大多数Canvas绘图 API 都没有定义在canvas元素本身上，而是定义在通过画布的getContext(2d)方法获得的一个“绘图环境”对象上(getContext()方法目前只有2d这一个参数，以后会有3d，至于什么时候公布大家可以自行查找相关资料)。因此，在canvas中绘图时，大部分时间其实都是在操作“绘图环境”对象上进行绘制。Canvas API分为属性部分和方法部分，内容很多，逐个解读可能不利于我们对功能的理解，因此，后面的内容我们将会以功能为单位进行讲解。为了便于说明，我们在绘图前获取canvas元素和绘图环境元素，统一为以下代码：4

42、.5.1 绘制直线绘制直线绘制直线相关的方法和属性如表4-1所示。在页面中绘制直线的代码如下：页面显示如图4-3所示，moveTo(x，y)方法只是把笔触移动到目标位置，并不会留下轨迹，而lineTo(x，y)方法会从笔触当前位置移动到目标位置，并且进行连线。另外需要注意的是，使用lineTo(x，y)方法之前一定要确定笔触位置，否则canvas会将笔触的当前位置视为笔触初始位置而不会创建任何线条。图4-3 在canvas中绘制直线4.5.2 绘制方框绘制方框绘制方框相关的方法和属性如表4-2所示。在页面中绘制矩形的代码如下：页面显示效果如图4-4所示。从页面显示效果中，我们可以看出不同方法的

43、作用是不同的。在canvas中，从左向右绘制出了3个宽度为100px、高度为200px的矩形。从中可以总结出如下规律：rect()不能单独使用，必须借助fill()、stroke()方法。rect()+fill()组合的效果和fillRect()一致，可等价。同理，rect()+stroke()组合的效果和strokeRect()一致，可等价。4.5.3 绘制圆或弧绘制圆或弧绘制圆形或弧形的使用方法为arc(x，y，r，sAngle，eAngle，counterclockwise)。其中：x、y是圆心坐标；r是半径；sAngle是开始弧度；eAngle是结束弧度；counterclockwis

44、e表示顺时针还是逆时针方式，默认为顺时针false，逆时针为true。注意：注意：此处是使用弧度(rad)来进行计算的，大家在高中时期应该学习过弧度，接下来我们来回忆一下弧度有关的知识：1rad=1r 57.3。一周=360=(2p)rad。1=(2p/360)rad=(p/180)rad。JavaScript中没有p，但是有函数Math.PI，如果需要用到准确的弧度，则需要使用此函数。在页面中绘制一个空心圆的代码如下：页面显示效果如图4-5所示。图4-5 在canvas中绘制圆和弧canvas中绘制圆的开始位置是在最右边，方向默认是顺时针，示意图如图4-6所示。图4-6 绘制圆的示意图4.5

45、.4 开始和关闭路径开始和关闭路径我们来看这样一个需求：在canvas中绘制两个圆，一个空心，一个实心。用之前所学的内容，尝试进行下面的代码：上面的代码中，先绘制一个空心的圆，再绘制一个实心的圆，运行的结果如图4-7所示。图4-7 绘制两个圆错误代码执行效果从图4-7中可以看出，两个圆都是实心，且第一个圆还有红色的描边。分析错误原因为：第一个贺其实绘制了两次。解决这个问题需要用到如表4-3所示的两个方法。这两个方法一般是成对存在的，closePath()方法会将画笔移到beginPath()的位置，并且结束画布。接下来，我们对上面有问题的代码进行改造，在每一次绘制圆之前开始路径，绘制完成后结束

46、路径。其代码如下：页面显示效果如图4-8所示。图4-8 绘制两个圆正确代码执行效果4.5.5 绘制文字绘制文字绘制文字相关的方法和属性如表4-4所示。在页面中绘制两行文字的代码如下：页面显示效果如图4-9所示。图4-9 在canvas中绘制两行文字canvas中绘制文字时，起始坐标并不是左上角，而是文字基线(Baseline)。在CSS中我们知道文字有基线，在canvas中绘制文字同样有基线。基线可以通过textBaseline属性进行设置，默认值是alphabetic。通过下面的代码可以看出文字与其坐标的关系：页面显示效果如图4-10所示。图4-10 canvas中的文字基线4.5.6 绘制

47、图像绘制图像canvas中绘制图像的方法如表4-5所示。drawImage()方法参数说明如表4-6所示。在canvas中绘制一张图片的代码如下：页面显示效果如图4-11所示。图4-11 在canvas中绘制图像第5章 HTML5的本地存储5.1 Web Storage5.2 Web SQL Database5.3 IndexedDB5.1 Web StorageWeb Storage目前有两种存储对象：localStorage和sessionStorage。localStorage属于永久性存储，而sessionStorage属于临时性储存，当会话结束的时候，sessionStorage中的

48、键值对会被清空。也就是说，localStorage对象存储的数据没有时间限制，一小时、一天、一年后，数据依然可用，sessionStorage对象在用户关闭浏览器窗口时，数据就会被删除。5.1.1 浏览器支持检测浏览器支持检测一般来讲，判断浏览器是否支持Web Storage，我们只需检查全局对象是否有localStorage或sessionStorage属性之一即可。此处，我们提供的检测方法是检测全局对象是否有localStorage属性。其代码如下：5.1.2 Web Storage APIWeb Storage API提供了一系列的属性和方法，访问储存在本地的数据。这些属性和方法在loc

49、alStorage和sessionStorage中都能够使用，主要的API如表5-1所示。注意：注意：Web Storage API监听事件只会发生在同源窗口中(同一个页面的不同窗口)，当前窗口不会触发监听事件。如果对应的操作没有值，则该值为null。如以上代码，如果进行插入操作，比如插入值为“test value”，则会提示“原本的值为：null。现在改为：test value”。5.1.3 永久本地存储对象永久本地存储对象localStorage在最新的JavaScript的API中增加了localStorage对象，可以使用户浏览器存储永久的Web端的数据，而且存储的数据不会随着Http

50、请求发送到后台服务器。存储数据的大小可以不用过多考虑，因为在HTML5标准中要求浏览器至少要支持4MB以上，所以，这完全是颠覆了Cookie只有4KB的限制，为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。例5-1 将关键字和对应的值保存到本地，要求：关闭浏览器重新打开页面依然能看到保存的数据。打开多个相同页面，当对数据进行操作时，其他页面同步进行刷新。代码实现了本地localStorage存储数据，可以输入关键字和值进行保存(将数据存储到本地)，也可以输入关键字进行删除对应本地数据操作，还能点击清空按钮清空所有本地数据。这些数据保存在本地，就算关闭浏览器重新打开网页也不会使数