网页设计基础与实战课件

上传人：1*** IP属地：广东上传时间：2025-02-15 格式：PPTX 页数：115 大小：1.80MB 积分：40 举报 版权申诉

已阅读5页，还剩110页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第8章实现HTML5应用8.1添加媒体文件8.2实现地理定位8.3使用canvas画布了解HTML5多媒体掌握<video>视频和<audio>音频的应用掌握HTML5地理定位的应用掌握<canvas>画布的应用引言HTML5是目前最新的HTML标准，是专门为承载丰富的web内容而设计的，并且无需额外插件。HTML5拥有新的语义、图形以及多媒体元素，如<canvas>、<video>等元素。并且HTML5提供的新元素和新的API，简化了web应用程序的搭建，如通过GeolocationAPI能更方便的获取到地理信息。8.1添加媒体文件<video>视频标签案例—JS控制视频DOM操作媒体文件<audio>音频标签8.1

添加媒体文件<video>标签定义视频，比如电影片段或其他视频流。<video>标签是HTML5的新标签，使用<video>标签可以在网页上直接插入视频文件，而不需要任何第三方插件。<video>标签有以下3点优势。8.1.1

<video>视频标签跨平台、好升级、好维护，相对于原生APP其开发成本较低。具有良好的移动支持，比如支持手势，本地存储和视频续播等，通过HTML5可实现网站移动化。代码更加简洁，交互性更好。<video>标签的的不足之处是兼容性差，不同的浏览器支持的视频格式会不一样，这就导致了可能在网页上无法播放该视频。8.1

添加媒体文件<video>标签支持的视频格式有MPEG4、WebM和Ogg，这3种视频格式的说明如下。8.1.1

<video>视频标签MPEG4简称MP4，是带有H.264视频编码和AAC音频编码的MPEG4文件。WebM是带有VP8视频编码和Vorbis音频编码的WebM文件。Ogg是带有Theora视频编码和Vorbis音频编码的Ogg文件。视频格式8.1

添加媒体文件InternetExplorer9+、Chrome、Firefox、Opera和Safari浏览器支持<video>标签，但部分视频格式不支持。浏览器对视频格式的支持情况如表所示。8.1.1

<video>视频标签视频格式浏览器格式InternetExplorer9+ChromeFirefoxOperaSafariMPEG4支持支持

支持WebM

支持支持支持

Ogg

支持支持支持8.1

添加媒体文件<video>标签的语法格式如下所示。8.1.1

<video>视频标签语法格式<videosrc="视频文件路径"></video>或者<video><sourcesrc="视频文件路径"type="视频格式"></source>......</video>8.1

添加媒体文件在上述<video>标签的语法中，src是source的缩写，意思是来源，实际指视频的路径。<source>标签为媒体元素（比如<video>视频和<audio>音频）定义媒介资源，src属性规定媒体文件的URL地址，type属性规定资源的媒体类型。source标签可以写多个，这是为了兼容各个浏览器，但里面只能有一个src属性说明文件路径，指定type属性兼容不同浏览器解码支持，type属性的属性值有video/ogg、video/mp4和video/webm，例如，<sourcesrc="happy.mp4"type="video/mp4"></source>。8.1.1

<video>视频标签语法格式8.1

添加媒体文件<video>标签的常用属性有controls、autoplay、loop、muted、poster、preload、width、height等，这些属性的具体说明如表所示。8.1.1

<video>视频标签<video>标签属性属性值说明controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮autoplayautoplay如果出现该属性，则视频在就绪后马上播放。注意，HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，在标签中不使用此属性则表示falselooploop如果出现该属性，则当媒介文件完成播放后再次开始播放mutedmuted规定视频的音频输出应该被静音posterURL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像8.1

添加媒体文件续表。8.1.1

<video>视频标签<video>标签属性属性值说明preloadnone/metadata/auto如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性widthpixels设置视频播放器的宽度heightpixels设置视频播放器的高度在上述表格中，preload属性有3个值，分别为none、metadata、auto。auto为当页面加载后载入整个视频。metadata为当页面加载后只载入元数据，包括尺寸、第一帧、曲目列表、持续时间等等。none为当页面加载后不载入视频。8.1添加媒体文件8.1.1<video>视频标签在网页中添加一个视频文件，使用<video>标签属性设置该文件。具体代码如下。演示说明<body><videosrc="media/preach.mp4"poster="media/3.jpg"width="600"autoplayloopcontrols></video></body>主体代码

例7.18.1添加媒体文件8.1.1<video>视频标签在网页中添加一个视频文件，使用<video>标签属性设置该文件。运行效果如下。演示说明8.1

添加媒体文件<audio>标签定义声音，比如音乐或其他音频流。<audio>标签是HTML5的新标签，使用<audio>标签可以在网页上直接插入音频文件，而不需要任何第三方插件。<audio>标签支持的音频格式有MP3、Vorbis和Wav，这3种音频格式的说明如下。8.1.2

<audio>音频标签MP3是一种音频压缩技术，其全称为动态影像专家压缩标准音频层面3（MovingPictureExpertsGroupAudioLayerІІІ，简称MP3），被用来大幅度地降低音频数据量。Vorbis是类似于ACC的另一种免费和开源的音频编码，用于替代MP3的下一代音频压缩技术。Wav是录音时用的标准的Windows文件格式，文件的扩展名为“WAV”，数据本身的格式为PCM或压缩型，属于无损音乐格式的一种。音频格式8.1

添加媒体文件InternetExplorer9+、Chrome、Firefox、Opera和Safari浏览器支持<audio>标签，但部分音频格式不支持。浏览器对音频格式的支持情况如表所示。8.1.2<audio>音频标签音频格式浏览器格式InternetExplorer9+ChromeFirefoxOperaSafariMP3支持支持

支持Vorbis

支持支持支持

Wav

支持支持支持8.1

添加媒体文件<audio>标签的语法格式如下所示。8.1.2<audio>音频标签语法格式<audiosrc="音频文件路径"></audio>或者<audio><sourcesrc="音频文件路径"type="音频格式"></source>......</audio><audio>标签的使用方法与<video>标签基本相同。8.1

添加媒体文件HTML5为<video>元素和<audio>元素提供了用于DOM操作的方法，常用的DOM操作的方法如表所示。8.1.3

DOM操作媒体文件操作方法方法说明play()播放媒体文件。如果视频没有加载，则加载并播放；如果视频为暂停，则播放视频pause()暂停播放媒体文件load()加载媒体文件。通常用于播放前的预加载，为播放做准备，也用于重新加载媒体文件requestFullscreen()控制视频全屏8.1

添加媒体文件HTML5为<video>元素和<audio>元素提供了用于DOM操作的属性，常用的DOM操作的属性如表所示。8.1.3

DOM操作媒体文件操作属性属性说明currentTime设置或返回音频/视频中的当前播放位置（以秒计），获取的值是精确的小数值currentSrc返回当前音频/视频的URLduration返回当前音频/视频的长度（以秒计）volume设置或返回音频/视频的音量，属性值为数值，音量范围为0~1paused设置或返回音频/视频是否暂停，属性值为布尔值true或falsemuted设置或返回音频/视频是否静音，属性值为布尔值true或false8.1

添加媒体文件续表。8.1.3

DOM操作媒体文件操作属性属性说明ended返回音频/视频的播放是否已结束，属性值为布尔值true或falseerror返回表示音频/视频错误状态的MediaError对象playbackRate设置或返回音频/视频播放的速度，属性值为数值，0~1之间是慢速播放，大于1是快速播放，1是正常播放速度。最小倍率是0.06，最大倍率不超过16loop设置或返回音频/视频是否应在结束时重新播放，属性值为布尔值true或false8.1添加媒体文件8.1.4案例-JS控制视频本实例是一个使用JavaScript语言实现按钮控制视频的页面。该页面主要由<div>块元素、<button>按钮标签和<video>视频标签构成，JS控制视频的页面结构简图如图所示。<head><metacharset="UTF-8"><title>JS控制视频</title>

<linktype="text/css"rel="stylesheet"href="media.css"></head><body><divid="media">

<videosrc="media/preach.mp4"width="540px"id="myVideo"controls></video><divclass="control"><button>播放</button><button>暂停</button><button>切换</button><button>放大</button><button>缩小</button><button>还原</button>

</div></div><scripttype="text/javascript"src="control.js"></script></body>代码实现8.1

添加媒体文件8.1.4案例-JS控制视频主体代码

例8.2/*清除页面默认边距*/*{margin:0;padding:0;}/*设置控制媒体页面*/#media{width:540px;

margin:10pxauto;/*设置外边距*/}/*设置按钮区域*/.control{margin:2pxauto;

text-align:center;}/*统一设置各个按钮*/button{width:80px;height:34px;font-size:18px;margin:5px2px;}代码实现8.1

添加媒体文件8.1.4案例-JS控制视频CSS部分代码

例8.28.1

添加媒体文件8.1.4案例-JS控制视频代码实现在上述CSS代码中，首先设置控制媒体页面，使用margin属性设置页面的外边距，再设置视频下方的按钮区域，使用text-align属性将内容居中显示，然后统一设置各个按钮，使用CSS属性设置按钮样式。//获取视频元素varmyvideo=document.getElementById("myVideo");//获取按钮元素varbtnArr=document.querySelectorAll("button");//为第一个按钮添加点击事件btnArr[0].onclick=function(){

//控制播放myvideo.play();};btnArr[1].onclick=function(){//控制暂停myvideo.pause();};btnArr[2].onclick=function(){

//切换播放与暂停if(myvideo.paused){myvideo.play();}else{myvideo.pause();}};代码实现8.1

添加媒体文件8.1.4案例-JS控制视频JS代码

例8.2//页面加载时，获取视频在页面中的宽度varsrcWidth=myvideo.width;btnArr[3].onclick=function(){

//视频放大1倍myvideo.width=myvideo.width*2;};btnArr[4].onclick=function(){

//视频缩小1倍myvideo.width=myvideo.width/2;};btnArr[5].onclick=function(){

//视频还原myvideo.width=srcWidth;};btnArr[6].onclick=function(){//控制静音myvideo.muted=true;};btnArr[7].onclick=function(){

//取消静音myvideo.muted=false;};代码实现8.1

添加媒体文件8.1.4案例-JS控制视频JS代码

例8.2btnArr[8].onclick=function(){//增加音量+（音量范围为0~1）if(myvideo.volume>=1){return;}//每次增加音量0.1myvideo.volume+=0.1;};btnArr[9].onclick=function(){//减小音量-

//当音量小于0.1时，设置音量为0if(myvideo.volume<0.1){

myvideo.volume=0;return;}myvideo.volume-=0.1;};//页面加载时，获取默认倍率varrate=myvideo.playbackRate;btnArr[10].onclick=function(){//放大倍率+（最大倍率不超过16）if(myvideo.playbackRate>=15){return;}

//每次增加倍率0.2myvideo.playbackRate+=0.2};btnArr[11].onclick=function(){//缩小倍率-if(myvideo.playbackRate<0.2){return;}

myvideo.playbackRate-=0.2};btnArr[12].onclick=function(){//还原倍率myvideo.playbackRate=rate;};btnArr[13].onclick=function(){//视频快进（单位为秒）if(myvideo.currentTime>=myvideo.duration){return;}代码实现8.1

添加媒体文件8.1.4案例-JS控制视频JS代码

例8.2

//每次视频快进5smyvideo.currentTime+=5;};btnArr[14].onclick=function(){//视频退进if(myvideo.currentTime<=5){return;}

myvideo.currentTime-=5;};btnArr[15].onclick=function(){//视频播放循环myvideo.loop=true;};btnArr[16].onclick=function(){

//视频播放不循环myvideo.loop=false;};btnArr[17].onclick=function(){

//控制视频全屏myvideo.requestFullscreen();};8.1

添加媒体文件8.1.4案例-JS控制视频代码实现在上述JS代码中，首先通过DOM操作获取视频元素和按钮元素，再依次为18个按钮分别添加点击事件，根据HTML5为媒体文件提供的DOM操作方法和属性，实现JavaScript控制视频。本节小结本节内容主要讲解了<video>视频标签和<audio>音频标签的文件格式和语法格式，以及<video>视频的标签属性，还有DOM操作媒体文件的方法和属性。通过本节的学习，希望读者可以了解<video>视频和<audio>音频的基本使用，掌握在JavaScript中通过DOM操作媒体文件，实现媒体文件的更多功能。8.2实现地理定位BOM概述案例—使用百度地图API实现地理定位navigator.geolocation属性地理定位概述8.2实现地理定位8.2.1

BOM概述浏览器对象模型(BrowserObjectModel，BOM)提供了独立于内容但可以与浏览器窗口进行交互的对象，使JavaScript有能力与浏览器“对话”。“对话”指对浏览器的操作，如改变窗口大小、打开新窗口、关闭窗口、弹出对话框、进行导航以及获取客户的一些信息(如浏览器名称、版本和屏幕分辨率)等。8.2实现地理定位8.2.1

BOM概述在BOM中利用window对象获取浏览器窗口，BOM是一个分层结构，window对象是整个BOM的核心（顶层）对象，表示浏览器中打开的窗口。BOM分层结构如图所示。window对象8.2实现地理定位8.2.1

BOM概述在浏览器中打开网页时，首先看到的是浏览器窗口，即顶层的window对象，可以使用window标识符引用。“顶层对象”是指最高一层的对象，其他所有对象都是它的下属。JavaScript中规定，浏览器环境的所有全局变量都是window对象。window对象中定义了一些属性，如代表location对象的location属性表示浏览器当前打开页面的URL信息；代表history对象的history属性表示浏览器历史访问列表；代表document对象的document属性表示浏览器中打开的文档；代表navigator对象的navigator属性包含浏览器本身相关的信息。window对象8.2实现地理定位8.2.1

BOM概述location对象表示浏览器当前打开页面的URL信息。在网络中，统一资源标识符（UniformResourceLocator，URL）是信息资源的一种字符串表示方式，统称为网址。通常URL的语法格式如下所示。window对象1.location对象scheme://hostname:port/path?querystring#fragment8.2实现地理定位8.2.1

BOM概述URL格式的各部分说明如下所示。window对象1.location对象scheme是通信协议方案，如http、https、ftp、file等。hostname是主机名，指服务器的域名系统(DNS)主机名或是IP地址，如、等。port表示端口，是一一个整数数字，可以省略。当省略端口时，表示使用对应协议的默认端口。如http协议默认端口为80，https默认端口为443，ftp默认端口为21等。path是访问资源的具体路径，通常表示服务器上的目录或文件地址。如folder/test.html、register.html、details.jsp等。8.2实现地理定位8.2.1

BOM概述URL格式的各部分说明如下所示。window对象1.location对象querystring是查询字符串(可选内容)，通常是用于向动态网页(如php、jsp、技术等)传递参数，使用问号（“？”）连接在访问资源路径之后。传递的参数是键值对格式，键值对用等号（“=”）连接，如果传递的参数有多个，则各个键值对间使用“&”符号连接，比如，username=xiaoming&age=18&address=beijing。fragment用于指定资源中的信息片段，可选内容，通常使用“#”与前部分字符串连接。在浏览器中访问网页资源时，“#”代表网页中的某个位置，右边的字符串就代表该位置的标识符，使用超级链接实现页面内部导航时会经常使用到它，如<ahref="#reg_help">用户注册</a>。8.2实现地理定位8.2.1

BOM概述location对象中定义了一系列的属性，用于获取URL各部分内容，location对象的一系列属性的具体说明如表所示。window对象1.location对象属性说明href获取完整的URL字符串或设置URLhash获取URL字符中“#”后面的字符串内容，包含“#”host获取URL中主机名和端口信息hostname获取URL中主机名pathname获取资源protocol获取URL使用协议8.2实现地理定位8.2.1

BOM概述续表。window对象1.location对象属性说明port获取端口search获取URL字符中“?”后面的字符串内容，包含“?”如果要改变在浏览器中显示的URL信息，最常用的是location.href属性重新设置URL，具体示例代码如下所示。location.href=""8.2实现地理定位8.2.1

BOM概述在location对象中，有3个常用的操作URL的方法，即reload()、replace()和assign()方法。reload()方法的主要作用是重新加载当前URL。replace()方法的作用是用新的URL代替当前URL。assign()方法的作用是重新设置URL，并向浏览器的历史访问列表中添加一条访问记录。具体示例代码如下所示。window对象1.location对象location.reload();//重新加载（刷新）当前页面location.replace("";//用新的URL代替当前URL，相当于跳转页面location.assign("");//重新设置URL，相当于跳转页面8.2实现地理定位8.2.1

BOM概述值得注意的是，使用replace()方法来替换当前URL，文档并不会在历史记录中添加新的访问记录，所以当调用rplace()方法后，用户不能通过单击浏览器“后退”按钮回到替换前的页面上。如果需要保留历史访问记录，可以使用asgs0方法来加载新的URL文档。window对象1.location对象8.2实现地理定位8.2.1

BOM概述history对象代表浏览器历史访问列表，保存用户访问网页的历史记录。history有一个表示浏览器历史访问列表URL数量的属性length，数量包含所有历史记录数，即所有可前进和后退的记录数量。出于安全方面的考虑，开发人员无法获取history对象中的具体信息，但可以借助历史访问列表，在不知道实际访问URL的情况下实现前进或后退。而history对象的back()、forward()或go()方法可实现网页前进或后退操作。window对象2.history对象8.2实现地理定位8.2.1

BOM概述实现网页前进或后退方法的具体说明如表所示。window对象2.history对象方法说明forward()网页前进。在历史访问列表中前进1页，如history.forward()back()网页后退。在历史访问列表中后退1页，如history.back()go()参数为正数时，表示前进指定数量的页面，如history.go(2);//前进2页如果历史访问列表中存在多个可前进或后退的URL记录，想要一次前进或后退多个记录，使用forward()或back()方法不能实现，因为它们每次只前进或后退一个页面。而history对象中的go()方法可以实现在历史记录中任意跳转，该方法接收表示前进或后退页面数量的参数，参数值可为正数或负数。8.2实现地理定位8.2.1

BOM概述navigator对象最早是在NetscapeNavigator2.0中引入的，现在已成为识别客户端浏览器信息的事实标准，即所有支持JavaScript的浏览器都有navigator对象的使用。navigator对象中包含了常用于检测浏览器信息的属性，navigator对象属性的具体说明如表所示。window对象3.navigator对象方法说明appCodeName返回浏览器的代码名，通常是MozillaappName完整的浏览器名称appVersion浏览器平台和版本信息8.2实现地理定位8.2.1

BOM概述续表。window对象3.navigator对象方法说明platform运行浏览器的操作系统平台userAgent返回由客户机发送服务器的user-agent头部的值userLanguage操作系统的默认自然语言信息8.2实现地理定位8.2.1

BOM概述window对象的一些常用方法如表所示。window对象方法方法说明alert(message)显示带有一段消息和一个确认按钮的警告框confirm(message)显示带有一段消息以及确认按钮和取消按钮的对话框prompt(message,defaultText)显示可提示用户进行输入的对话框。可接收2个参数，message为在对话框中显示的纯文本，defaultText为默认的输入文本open()打开一个新的浏览器窗口或查找一个已命名的窗口close()关闭浏览器窗口，但如果没有得到用户的运行，大多数浏览器主窗口是不能关闭的moveTo()把窗口的左上角移动到一个指定的坐标moveBy()可相对窗口的当前坐标把它移动指定的像素8.2实现地理定位8.2.1

BOM概述window特有的2个事件为onload（加载）和onunload（关闭）事件。window.onload事件用于在网页加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行某个方法。window.onunload事件是当用户离开页面时发生的事件，即通过点击一个连接，提交表单，关闭浏览器窗口等，触发的事件。window对象方法8.2实现地理定位8.2.2

地理定位概述HTML5的GeolocationAPI（地理位置应用程序接口）用于获得用户的地理位置，鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。地理定位（Geolocation）是通过HTML5技术获取到经纬度值，再配合第三方的地图API接口，便可以展现当前应用所在的位置。很多基于地理位置的应用都是通过地理信息来实现的，例如可以使用地理定位来显示地图和导航，以及其它一些与用户当前位置有关的信息。8.2实现地理定位8.2.2

地理定位概述地理位置获取流程打开需要获取位置的web应用。应用向浏览器请求地理位置，询问用户是否允许获取当前位置信息。如果用户允许，浏览器从设备上获取信息。浏览器将获取到的信息发送到一个信任的位置服务器，服务器返回地理信息。浏览器持续追踪用户的地理位置需要与第三方地图API配合，交互呈现位置信息。8.2实现地理定位8.2.2

地理定位概述关于地图API1.介绍目前常用的第三方地图API为百度地图API，用户可在网站上搜索“百度地图开放平台”进入API（应用程序接口），根据需要选择相关的开发文档实现地理定位。百度地图JavaScriptAPIGLv1.0是一套由JavaScript语言编写的应用程序接口，可帮助用户在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。百度地图JavaScriptAPI支持HTTP和HTTPS，免费对外开放，可直接使用，接口使用无次数限制。JavaScriptAPIGL使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图，GL版本接口基本向下兼容，迁移成本低。目前v1.0版本支持了基本的3D地图展示、基本地图控件和覆盖物。8.2实现地理定位8.2.2

地理定位概述关于地图API2.使用范围百度地图API可让用户在接受使用条款约束的情况下，在网站上显示百度地图图片，进行地点搜索、路线查询和交通流量显示等操作。用户只可使用在百度地图API文档中所列明开放的API功能来对API相关服务数据的结果进行展示，不得直接存取、使用内部数据、图片、程序、模块或是任何其他百度地图的服务或功能。8.2实现地理定位8.2.3

navigator.geolocation属性HTML5为navigator对象新增了一个geolocation属性，geolocation属性是属于地理定位（Geolocation）对象，可获取浏览者的地理位置。利用JavaScript接口中navigator.geolocation属性的3个方法可以实现HTML5地理定位的操作，这3个方法分别为getCurrentPosition()、watchPosition()和clearWatch()。8.2实现地理定位getCurrentPosition()方法用于获取用户当前地理位置信息，其语法格式如下所示。8.2.3navigator.geolocation属性getCurrentPosition()方法navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);getCurrentPosition()方法有3个回调函数，successCallback为获取位置信息成功时执行的回调函数，返回的数据中包含经纬度等信息，结合第三方地图API即可在地图中显示当前用户的位置信息。errorCallback为获取位置信息失败时执行的回调函数，可以根据错误类型提示信息。options可用来设置更精细的定位。8.2实现地理定位successCallback回调函数返回一个地理数据对象position作为参数。position对象有timestamp和coords这2个属性。timestamp表示该地理数据创建时间（时间戳），coords表示地理状态，包括7个属性，其属性的具体说明如表所示。8.2.3navigator.geolocation属性getCurrentPosition()方法1.successCallback属性说明coords.longitude十进制数的经度coords.latitude十进制数的纬度coords.accuracy位置精度8.2实现地理定位续表。8.2.3navigator.geolocation属性getCurrentPosition()方法1.successCallback属性说明coords.altitude海拔，海平面以上，以米计coords.altitudeAccuracy位置的海拔精度coords.heading方向，从正北开始，以度计coords.speed速度，以米/每秒计8.2实现地理定位errorCallback回调函数返回一个错误数据对象error作为参数，包括message和code这2个属性。message表示错误信息，code表示错误代码，错误代码包含4个值，错误代码的具体说明如表所示。8.2.3navigator.geolocation属性getCurrentPosition()方法2.errorCallback属性说明error.PERMISSION_DENIED表示用户拒绝浏览器获取位置信息的请求，数值为1，即code==1error.POSITION_UNAVAILABLE表示网络不可用或者连接不到卫星，数值为2，即code==2error.TIMEOUT表示获取超时时，数值为3，即code==3。必须在options中指定了timeout值时才有可能发生这种错误error.UNKNOWN_ERROR表示不包括在其他错误代码中的错误，可以在message中查找信息8.2实现地理定位options的数据格式为JSON，有3个可选的属性，即enableHighAccuracy、maximumAge和timeout。8.2.3navigator.geolocation属性getCurrentPosition()方法3.optionsenableHighAcuracy表示是否启用高精确度模式，默认值为false。如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。timeout表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback函数，默认不限时，单位为毫秒。maximumAge表示浏览器重新获取位置信息的时间间隔。8.2实现地理定位watchPosition()方法监视当前用户地理位置信息，其功能与getCurrentPosition()方法相似，同样拥有3个参数，与getCurrentPosition()相同。但watchPosition()方法是定期轮询设备的位置，不停地获取和更新用户的地理位置信息，执行间隔时间，当设备地理位置发生改变时，自动调用。8.2.3navigator.geolocation属性watchPosition()方法varid=navigator.geolocation.watchPosition(successCallback,errorCallback,options);watchPosition()函数会返回一个ID，唯一地标记该位置监视器，可以将这个ID传给clearWatch()函数来停止监视用户位置。watchPosition()方法的语法格式如下所示。8.2实现地理定位clearWatch()方法停止监视当前用户地理位置信息，配合watchPosition()方法使用，用于停止watchPosition()轮询。8.2.3navigator.geolocation属性clearWatch()方法navigator.geolocation.clearWatch(id);参数id为移除的监听器所对应的Geolocation.watchPosition()方法返回的ID数字。clearWatch()方法的语法格式如下所示。8.2实现地理定位8.2.4案例-使用百度地图API实现地理定位本实例是一个使用百度地图API实现地理定位的页面。该页面主要有地图容器、比例尺控件、位置标注图标和标注位置信息显示框等，实现地理定位页面结构简图如图所示。<body>

<divid="allmap"></div></body>代码实现8.2实现地理定位8.2.4案例-使用百度地图API实现地理定位主体代码

例8.3新建一个HTML文件，以内嵌方式在该文件中加入CSS代码和JavaScript代码。首先，在<body>标签中定义<div>容器块，在网页中添加地图位置，并添加ID名为“allmap”。然后完成头部文件和地图容器样式的编写，让地图容器以90%的比率位于网页中，接着引入百度地图API文件，再使用JavaScript脚本语言设置地图应用。主体代码如下。<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="viewport"content="initial-scale=1.0,user-scalable=no"/><title>实现地理定位</title><styletype="text/css">body,html{width:100%;height:100%;}#allmap{

width:90%;height:90%;

overflow:hidden;margin:0;font-family:"微软雅黑";}</style>

<scripttype="text/javascript"src="/api?v=1.3"></script></head>代码实现8.2实现地理定位8.2.4案例-使用百度地图API实现地理定位CSS部分代码

例8.3//使用window.onload事件在网页加载完毕后立刻执行地理定位方法window.onload=getLocation;//调用HTML5GeoLocationAPI获取地理位置functiongetLocation(){document.getElementById('allmap').innerHTML='正在检索......';

//检查浏览器是否支持HTML5GeolocationAPIif(navigator.geolocation){

//浏览器支持geolocation,开始请求地理位置信息navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);}else{

//浏览器不支持geolocationalert('浏览器不支持GeoLocation!');}}

//获取用户当前位置时，设置参数varoptions={enableHighAccuracy:true,//指示浏览器是否启用高精确度模式，默认为falsetimeout:5000,//指定获取地理位置的超时时间，默认不限时，单位为毫秒maximumAge:2000//最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置}

代码实现8.2实现地理定位8.2.4案例-使用百度地图API实现地理定位JS代码

例8.3//当getCurrentPosition()方法成功时调用的回调函数functionsuccessCallback(position){//得到地理位置信息

varlongitude=position.coords.longitude;//十进制经度varlatitude=position.coords.latitude;//十进制纬度varmap=newBMap.Map("allmap");//使用百度地图API创建地图实例varpoint=newBMap.Point(longitude,latitude);//创建一个坐标map.centerAndZoom(point,16);//地图初始化，设置中心点坐标和地图级别map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放varscaleCtrl=newBMap.ScaleControl();//添加比例尺控件,默认位于地图左下方map.addControl(scaleCtrl);//设置标注的图标,可自己定义图标varmyIcon=newBMap.Icon("../image/icon.png",newBMap.Size(18,27));//设置标注的经纬度varmarker=newBMap.Marker(newBMap.Point(longitude,latitude),{icon:myIcon});//把标注添加到地图上map.addOverlay(marker);//设置点击事件marker.addEventListener("click",function(){alert("经度:"+longitude+",纬度:"+latitude);});}

代码实现8.2实现地理定位8.2.4案例-使用百度地图API实现地理定位JS代码

例8.3

//获取失败时functionerrorCallback(error){switch(error.code){case1:alert("位置服务被拒绝");break;case2:alert("暂时获取不到位置信息");break;case3:alert("获取信息超时");break;case4:alert("未知错误");break;}}代码实现8.2实现地理定位8.2.4案例-使用百度地图API实现地理定位JS代码

例8.38.2实现地理定位8.2.4案例-使用百度地图API实现地理定位代码实现在上述JS代码中，使用JavaScript脚本语言设置地图应用，首先使用window.onload事件在网页加载完毕后立刻执行地理定位方法，然后调用HTML5的GeoLocation地理定位API获取地理位置，检查浏览器是否支持地理定位API，若支持则使用getCurrentPosition()方法获取用户当前地理位置信息。getCurrentPosition()方法有3个回调函数，首先使用options函数的可选参数设置更精细的定位，接着使用successCallback()回调函数获取位置信息，最后使用errorCallback()回调函数执行获取位置信息失败时的浏览器输出信息。在此页面中，地图开启鼠标滚轮缩放功能，并添加比例尺控件，当滑动鼠标滚轮时，地图能够放大或缩小，比例尺数据也会随之变化。本节小结本节内容讲解了BOM的window对象下的location、history和navigator相关对象属性，以及window对象方法，还有地理定位navigator.geolocation属性的getCurrentPosition()、watchPosition()和clearWatch()3个方法及其回调函数的相关参数的使用。通过本节的学习，希望读者可以了解BOM的相关知识，以及掌握地理定位的基本使用方法。8.3使用canvas画布canvas的基本使用案例—canvas实现验证码canvas绘制文本canvas绘制图形<svg>标签canvas变形canvas图像8.3

使用canvas画布HTML5的canvas画布可通过JavaScript脚本语言在网页上绘制图形。canvas画布是一个矩形区域，可以控制其每一个像素，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas画布通过JavaScript来绘制2D图形，是逐像素进行渲染的。在canvas画布中，一旦图形被绘制完成，它就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。8.3.1

canvas的基本使用8.3使用canvas画布在HTML页面添加一个canvas画布，具体用法如下所示。8.3.1canvas的基本使用创建canvas画布<canvasid="myCanvas"width="400"height="300"></canvas>在<canvas>标签中，通常需要指定一个id属性，以便于JavaScript获取canvas元素，而width和height属性定义的画布的大小。8.3使用canvas画布canvas画布本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。使用canvas画布有3个基本步骤，使用步骤如下所示。8.3.1canvas的基本使用使用canvas画布第一步，在JavaScript的DOM操作中，通过元素的id属性获取canvas画布。第二步，根据canvas对象取得绘图上下文，需要调用getContext()方法，并传入上下文参数“2d”。绘图上下文包含所有绘制方法和属性的定义。第三步，基于绘图上下文环境，调用绘制方法进行绘图。8.3使用canvas画布在canvas画布中绘制一个矩形，JavaScript示例代码如下所示。8.3.1canvas的基本使用使用canvas画布<script>varmycanvas=document.getElementById("myCanvas");varctx=mycanvas.getContext("2d");ctx.fillRect(50,50,200,200);//绘制矩形(x,y,宽,高)</script>8.3使用canvas画布canvas图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。在本质上，路径是由很多子路径构成的，这些子路径都是在一个列表中，所有的子路径（线、弧形等）构成图形。8.3.2

canvas绘制图形路径创建路径起始点。调用绘制方法绘制路径。将路径封闭。一旦路径生成，通过描边或填充路径区域来渲染图形。使用路径绘制图形的步骤如下所示。8.3使用canvas画布canvas绘制图形的方法如表所示。8.3.2

canvas绘制图形路径方法说明beginPath()创建一个新路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径。该方法调用之后，列表清空重置，可以重新绘制新的图形moveTo(x,y)把画笔移动到指定的坐标(x,y)。相当于设置路径的起始点坐标lineTo(xₒ,yₒ)把画笔移动到指定的坐标(xₒ,yₒ)，绘制一条从当前位置到指定坐标(xₒ,yₒ)的直线，可定义线条结束坐标closePath()闭合路径之后，图形绘制命令又重新指向到绘图上下文中stroke()通过线条来绘制图形轮廓，不会自动调用closePath()方法fill()填充形状，通过填充路径的内容区域生成实心的图形，会自动调用closePath方法8.3使用canvas画布续表。8.3.2

canvas绘制图形路径方法说明clip()剪切。表示从原始画布剪切任意形状和尺寸的区域save()保存。表示保存canvas当前状态，可以调用canvas的平移、放缩、旋转、错切、裁剪等操作restore()读取。表示恢复canvas之前保存的状态。防止save后canvas执行的操作对后续的绘制有影响8.3使用canvas画布fillStyle设置或返回用于填充绘画的颜色、渐变或模式，需要在填充前声明才有效，其语法格式如下所示。8.3.2canvas绘制图形线条以及填充颜色ctx.fillStyle=color|gradient|pattern;在上述语法中，color指示绘图填充色的CSS颜色值，默认值是#000000。gradient用于填充绘图的渐变对象。pattern用于填充绘图的pattern对象。1.fillStyle填充样式8.3使用canvas画布strokeStyle设置或返回用于笔触的颜色、渐变或模式，需要在绘制前声明才有效，其语法格式如下所示。8.3.2canvas绘制图形线条以及填充颜色ctx.strokeStyle=color|gradient|pattern;strokeStyle线条样式与fillStyle填充样式属性值相似。2.strokeStyle线条样式8.3使用canvas画布lineWidth设置或返回当前的线条宽度，其语法格式如下所示。8.3.2canvas绘制图形线条以及填充颜色ctx.lineWidth=number;在上述语法中，number为当前线条的宽度，以像素计。3.lineWidth线条宽度8.3使用canvas画布lineCap设置或返回线条的结束端点样式，其语法格式如下所示。8.3.2canvas绘制图形线条以及填充颜色ctx.lineCap="butt|round|square";在上述语法中，butt为默认值默认，表示向线条的每个末端添加平直的边缘。round表示向线条的每个末端添加圆形线帽。square表示向线条的每个末端添加正方形线帽。而round和square会使线条略微变长。4.lineCap线条结束端点样式8.3使用canvas画布lineJoin设置或返回两条线相交时，所创建的拐角类型。其语法格式如下所示。8.3.2canvas绘制图形线条以及填充颜色ctx.lineJoin="bevel|round|miter";在上述语法中，miter为默认值，用于创建尖角。bevel用于创建斜角。Round用于创建圆角。5.lineJoin线条拐角类型8.3使用canvas画布canvas画布只支持一种原生的图形绘制——矩形。所有其他图形都至少需要生成一种路径，不过，由于canvas画布拥有众多生成路径的方法，利用这些方法可以绘制出复杂的图形。8.3.2

canvas绘制图形绘制矩形fillRect(x,y,width,height)绘制一个填充的矩形，默认填充颜色为黑色。strokeRect(x,y,width,height)绘制一个矩形的边框。clearRectx,y,width,height)清除指定的矩形区域，这块区域会变得完全透明。canvas画布绘制矩形有3种方法，如下所示。以上3个方法具有相同的参数，x表示矩形的x坐标，y表示矩形的y坐标，width和height分别表示矩形的宽度和高度。8.3使用canvas画布arc()方法用于绘制弧形或圆形，其语法格式如下所示。8.3.2canvas绘制图形绘制弧形ctx.arc(x,y,radius,startingAngle,endingAngle,counterclockwise);在上述语法中，x,y表示圆的中心坐标。radius表示圆的半径。startingAngle和endingAngle表示开始位置和结束位置，以弧度计。弧的圆形的三点钟位置是0度。counterclockwise为可选参数，规定应该逆时针还是顺时针绘图，值为true时顺时针绘制，值为false时逆时针绘制。<body><canvaswidth="400"height="300"></canvas></body>绘制弧形8.3使用canvas画布8.3使用canvas画布主体代码

例8.4<script>

varmycanvas=document.getElementsByTagName("canvas")[0];

varctx=mycanvas.getContext("2d");//绘制扇形

ctx.arc(200,200,150,Math.PI/180*210,Math.PI/180*330);//绘制弧形线ctx.lineTo(200,200);//连接圆心ctx.fillStyle="#e4393c";//填充颜色ctx.fill();//填充形状</script>演示说明，在canvas画布中绘制一个扇形。具体代码如下。绘制弧形8.3使用canvas画布8.3使用canvas画布演示说明，在canvas画布中绘制一个扇形。运行效果如下。若需通过arc()来创建圆形，可把起始角设置为0，结束角设置为2*Math.PI。8.3

使用canvas画布canvas画布中不仅可以绘制图形，还可以绘制文本。绘制文本，既可以使用填充方法，也可以使用勾勒方法。canvas画布提供了2种方法来渲染文本，fillText()方法在画布上绘制填色的文本，即填充绘制文本，文本的默认颜色是黑色。strokeText()方法在画布上绘制文本（没有填色），即描边绘制文本，文本的默认颜色是黑色。8.3.3

canvas绘制文本8.3

使用canvas画布8.3.3

canvas绘制文本fillText()方法和strokeText()方法的语法格式如下所示。fillText()方法：ctx.fillText(text,x,y,maxWidth);//填充绘制文本strokeText()方法：ctx.strokeText(text,x,y,maxWidth);//描边绘制文本在上述语法中，2种方法的参数相同。text为画布上输出的文本，x为相对于画布绘制文本的x坐标位置，y为相对于画布绘制文本的y坐标位置，maxWidth为允许的最大文本宽度，以像素计，是一个可选参数。fillText()方法使用font属性来定义字体和字号，并使用fillStyle属性以另一种颜色或渐变来渲染文本。而strokeText()方法使用font属性来定义字体和字号，并使用strokeStyle属性以另一种颜色或渐变来渲染文本。8.3

使用canvas画布8.3.3

canvas绘制文本为保证文本在各浏览器下显示一致，需要设置文本的样式属性，文本的样式属性说明如表所示。文本样式属性属性说明font定义文本字体。canvas中的字体会继承canvas元素的字体大小和样式风格，而设置font属性覆盖继承值，符合CSS规则。其属性值有fontstyle、fontvariant、fontsize、fontweight、lineheight和fontfamily，每个属性值使用空格隔开。textBaseline定义文本基线（垂直对齐方式）。其属性值有alphabetic（默认值）、top、hanging、middle、ideographic和bottom。textAlign定义水平对齐方式。其属性值有start（默认值）、end、left、right和center。8.3使用canvas画布在canvas中使用drawImage()方法可以在画布上绘制图像、画布或视频，该方法还能够绘制图像的某些部分，以及增加或减少图像的尺寸。drawImage()方法绘制图像有3种方式，第1种方式在画布上定位图像，其语法格式如下所示。8.3.4

canvas图像语法格式ctx.drawImage(img,x,y);在第1种方式中，drawImage()方法有3个参数，img表示规定要使用的图像、画布或视频，x表示在画布上放置图像的x坐标位置，y表示在画布上放置图像的y坐标位置。8.3使用canvas画布第2种方式在画布上定位图像，并规定图像的宽度和高度，其语法格式如下所示。8.3.4

canvas图像语法格式ctx.drawImage(img,x,y,width,height);在第2种方式中，drawImage()方法有5个参数，width表示可设置图像的宽度，height表示可设置图像的高度。8.3使用canvas画布第3种方式在画布上剪切图像，并在画布上定位被剪切的部分，其语法格式如下所示。8.3.4

canvas图像语法格式ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);在第3种方式中，drawImage()方法有9个参数，sx表示开始剪切的x坐标位置，sy表示开始剪切的y坐标位置，swidth表示被剪切图像的宽度，sheight表示被剪切图像的高度。8.3使用canvas画布在canvas中，获取图像对象的方式有2种。第1种方式，在window.onload事件处理器中，获取已有图片对象，然后在canvas中安全绘制图片，示例代码如下所示。8.3.4

canvas图像获取方式<body><canvaswidth="500"height="500"></canvas><imgsrc="media/3.jpg"width="240"alt></body><script>

varmycanvas=document.getElementsByTagName("canvas")[0];

varctx=mycanvas.getContext("2d");

window.onload=function(){

varimg=document.getElementsByTagName("img")[0];ctx.drawImage(img,50,50);//绘制图片}</script>8.3使用canvas画布第2种方式，创建图像对象，然后在图像对象img.onload事件处理器中安全地把图片绘制在canvas中，示例代码如下所示。8.3.4

canvas图像获取方式<body><canvaswidth="500"height="500"></canvas></body><script>

varmycanvas=document.getElementsByTagName("canvas")[0];varctx=mycanvas.getContext("2d");varimg=newImage();img.src="media/3.jpg";

img.onload=function(){

ctx.drawImage(img,150,200,250,250,100,100,300,300);}</script>8.3使用canvas画布8.3.4

canvas图像获取方式以上2种获取图像对象的方式，必须在onload事件中执行drawImage()方法。这是由于img.src赋值的时候，图片才开始去加载，需要等到图像加载完成后才能使用drawImage()方法绘制，或者还没加载完，就直接使用drawImage()方法了，画布上就会显示空白。8.3使用canvas画布canvas中的变形(Transforms)针对的不是绘制的图形，而是画布本身。translate()位移方法用来移动canvas画布的原点到指定的位置，其语法格式如下所示。8.3.5

canvas变形位移ctx.translate(x,y)；translate()位移方法接受2个参数，x是左右偏移量，y是上下偏移量。值得注意的是，该方法移动的是canvas画布的坐标原点，即坐标的位移。8.3使用canvas画布rotate()旋转方法是以原点为中心旋转canvas画布，即旋转坐标轴。其语法格式如下所示。8.3.5

canvas变形旋转ctx.rotate(angle)；rotate()旋转方法只接受1个参数，旋转的角度(angle)，是顺时针方向的，以弧度为单位，例如ctx.rotate(Math.PI/180*60)。8.3使用canvas画布scale()缩放方法用来增减图形在canvas中的像素数目，对形状、位图进行放大或缩小，其语法格式如下所示。8.3.5

canvas变形缩放ctx.scale

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计基础与实战课件

文档简介

温馨提示

最新文档

评论

网页设计基础与实战课件

文档简介

温馨提示

最新文档

评论

相关文档