HTML5+CSS3+JavaScript-第8章-教学设计

学IT有疑问，就找千问千知千里寻他众百度,锋自苦寒磨砺出千锋教育HTML5+CSS3+JavaScript网页设计基础与实战教学设计课程名称：HTML5+CSS3+JavaScript网页设计基础与实战_____授课年级：_______________________授课学期：_______________________教师姓名：_______________________2022年09月07日课程名称第8章实现HTML5应用计划学时8学时内容分析本章介绍了<video>标签和<audio>标签，DOM操作媒体文件的方法与属性，BOM的概述，地理定位概述，HTML5的geolocation属性，canvas的基本使用，canvas绘制图形和文本，canvas图像与变形，以及<svg>标签教学目标与教学要求【知识目标】了解BOM中window对象的4个基础属性认识地理定位了解<svg>标签【技能目标】掌握<video>标签和<audio>标签掌握DOM操作媒体文件的方法与属性掌握HTML5的geolocation属性掌握canvas的基本使用掌握canvas绘制图形和文本掌握canvas图像与变形【思政育人目标】培养学生健康的审美观念引导学生在学习中健全职业道德的规范。引导学生创新思维和探索的科学精神。教学重点掌握<video>标签和<audio>标签的应用、掌握getCurrentPosition()方法的使用、能够使用canvas绘制图形和文本教学难点实现本章节的3个小节案例教学方式课堂讲解配合ppt演示1学时教学过程第一学时（<video>标签）一、提出需求，导入学习任务（1）思考如何通过HTML5新元素实现HTML5的相关应用。HTML5是目前最新的HTML标准，是专门为承载丰富的web内容而设计的，并且无需额外插件。HTML5拥有新的语义、图形以及多媒体元素，如<canvas>、<video>等元素。并且HTML5提供的新元素和新的API，简化了web应用程序的搭建，如通过GeolocationAPI能更方便的获取到地理信息。（2）明确学习方向。掌握<video>标签二、知识讲解（一）<video>标签1.定义<video>标签定义视频，比如电影片段或其他视频流。<video>标签是HTML5的新标签，使用<video>标签可以在网页上直接插入视频文件，而不需要任何第三方插件。2.优势跨平台、好升级、好维护，相对于原生APP其开发成本较低。具有良好的移动支持，比如支持手势，本地存储和视频续播等，通过HTML5可实现网站移动化。代码更加简洁，交互性更好。但<video>标签的不足之处是兼容性差，不同的浏览器支持的视频格式会不一样，这就导致了可能在网页上无法播放该视频。3.视频格式<video>标签支持的视频格式有MPEG4、WebM和Ogg。MPEG4简称MP4，是带有H.264视频编码和AAC音频编码的MPEG4文件。WebM是带有VP8视频编码和Vorbis音频编码的WebM文件。Ogg是带有Theora视频编码和Vorbis音频编码的Ogg文件。4.语法格式<video>标签的语法格式如下所示。<videosrc="视频文件路径"></video>或者<video><sourcesrc="视频文件路径"type="视频格式"></source>......</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>。5.标签属性<video>标签的常用属性有controls、autoplay、loop、muted、poster、preload、width、height等。controlsautoplayloopmutedposterpreloadwidthheight6.演示说明在网页中添加一个视频文件，使用<video>标签属性设置该文件。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第二学时（<audio>标签、DOM操作媒体文件）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握<audio>标签熟练使用DOM操作媒体文件二、知识讲解（一）<audio>标签1.定义<audio>标签定义声音，比如音乐或其他音频流。<audio>标签是HTML5的新标签，使用<audio>标签可以在网页上直接插入音频文件，而不需要任何第三方插件。2.音频格式<audio>标签支持的音频格式有MP3、Vorbis和Wav。MP3是一种音频压缩技术，其全称为动态影像专家压缩标准音频层面3（MovingPictureExpertsGroupAudioLayerІІІ，简称MP3），被用来大幅度地降低音频数据量。Vorbis是类似于ACC的另一种免费和开源的音频编码，用于替代MP3的下一代音频压缩技术。Wav是录音时用的标准的Windows文件格式，文件的扩展名为“WAV”，数据本身的格式为PCM或压缩型，属于无损音乐格式的一种。3.语法格式<audio>标签的语法格式如下所示。<audiosrc="音频文件路径"></audio>或者<audio><sourcesrc="音频文件路径"type="音频格式"></source>......</audio><audio>标签的使用方法与<video>标签基本相同。（二）DOM操作媒体文件1.操作方法HTML5为<video>元素和<audio>元素提供了用于DOM操作的方法。play()pause()load()requestFullscreen()2.操作属性HTML5为<video>元素和<audio>元素提供了用于DOM操作的属性。currentTimecurrentSrcdurationvolumepausedmutedendederrorplaybackRateloop（三）案例讲解讲解JS控制视频案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第三学时（BOM、window对象）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。了解BOM二、知识讲解（一）BOM1.了解BOM浏览器对象模型(BrowserObjectModel，BOM)提供了独立于内容但可以与浏览器窗口进行交互的对象，使JavaScript有能力与浏览器“对话”。“对话”指对浏览器的操作，如改变窗口大小、打开新窗口、关闭窗口、弹出对话框、进行导航以及获取客户的一些信息(如浏览器名称、版本和屏幕分辨率)等。（二）window对象1.定义在BOM中利用window对象获取浏览器窗口，BOM是一个分层结构，window对象是整个BOM的核心（顶层）对象，表示浏览器中打开的窗口。在浏览器中打开网页时，首先看到的是浏览器窗口，即顶层的window对象，可以使用window标识符引用。“顶层对象”是指最高一层的对象，其他所有对象都是它的下属。JavaScript中规定，浏览器环境的所有全局变量都是window对象。window对象中定义了一些属性，如代表location对象的location属性表示浏览器当前打开页面的URL信息；代表history对象的history属性表示浏览器历史访问列表；代表document对象的document属性表示浏览器中打开的文档；代表navigator对象的navigator属性包含浏览器本身相关的信息。2.location对象（1）定义location对象表示浏览器当前打开页面的URL信息。在网络中，统一资源标识符（UniformResourceLocator，URL）是信息资源的一种字符串表示方式，统称为网址。通常URL的语法格式如下所示。scheme://hostname:port/path?querystring#fragment（2）属性location对象中定义了一系列的属性，用于获取URL各部分内容。hrefhashhosthostnamepathnameprotocolportsearch（3）操作URL的方法reload()方法replace()方法assign()方法3.history对象（1）定义history对象代表浏览器历史访问列表，保存用户访问网页的历史记录。history有一个表示浏览器历史访问列表URL数量的属性length，数量包含所有历史记录数，即所有可前进和后退的记录数量。出于安全方面的考虑，开发人员无法获取history对象中的具体信息，但可以借助历史访问列表，在不知道实际访问URL的情况下实现前进或后退。（2）前进或后退方法forward()方法back()方法go()方法4.navigator对象（1）定义navigator对象最早是在NetscapeNavigator2.0中引入的，现在已成为识别客户端浏览器信息的事实标准，即所有支持JavaScript的浏览器都有navigator对象的使用。（2）对象属性navigator对象中包含了常用于检测浏览器信息的属性。appCodeNameappNameappVersionplatformuserAgentuserLanguage5.window对象方法window对象的一些常用方法如下。alert(message)confirm(message)prompt(message,defaultText)open()close()moveTo()moveBy()三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第四学时（地理定位、navigator.geolocation属性）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。了解地理定位掌握navigator.geolocation属性的使用二、知识讲解（一）地理定位1.概述HTML5的GeolocationAPI（地理位置应用程序接口）用于获得用户的地理位置，鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。地理定位（Geolocation）是通过HTML5技术获取到经纬度值，再配合第三方的地图API接口，便可以展现当前应用所在的位置。2.地理位置获取流程（1）打开需要获取位置的web应用。（2）应用向浏览器请求地理位置，询问用户是否允许获取当前位置信息。（3）如果用户允许，浏览器从设备上获取信息。（4）浏览器将获取到的信息发送到一个信任的位置服务器，服务器返回地理信息。（5）浏览器持续追踪用户的地理位置（6）需要与第三方地图API配合，交互呈现位置信息。3.关于地图API目前常用的第三方地图API为百度地图API，用户可在网站上搜索“百度地图开放平台”进入API（应用程序接口），根据需要选择相关的开发文档实现地理定位。（1）介绍百度地图JavaScriptAPIGLv1.0是一套由JavaScript语言编写的应用程序接口，可帮助用户在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。百度地图JavaScriptAPI支持HTTP和HTTPS，免费对外开放，可直接使用，接口使用无次数限制。JavaScriptAPIGL使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图，GL版本接口基本向下兼容，迁移成本低。目前v1.0版本支持了基本的3D地图展示、基本地图控件和覆盖物。（2）使用范围百度地图API可让用户在接受使用条款约束的情况下，在网站上显示百度地图图片，进行地点搜索、路线查询和交通流量显示等操作。用户只可使用在百度地图API文档中所列明开放的API功能来对API相关服务数据的结果进行展示，不得直接存取、使用内部数据、图片、程序、模块或是任何其他百度地图的服务或功能。（二）navigator.geolocation属性1.定义HTML5为navigator对象新增了一个geolocation属性，geolocation属性是属于地理定位（Geolocation）对象，可获取浏览者的地理位置。利用JavaScript接口中navigator.geolocation属性的3个方法可以实现HTML5地理定位的操作，这3个方法分别为getCurrentPosition()、watchPosition()和clearWatch()。2.getCurrentPosition()方法（1）定义getCurrentPosition()方法用于获取用户当前地理位置信息，其语法格式如下所示。navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);getCurrentPosition()方法有3个回调函数，successCallback为获取位置信息成功时执行的回调函数，返回的数据中包含经纬度等信息，结合第三方地图API即可在地图中显示当前用户的位置信息。errorCallback为获取位置信息失败时执行的回调函数，可以根据错误类型提示信息。options可用来设置更精细的定位。（2）successCallbacksuccessCallback回调函数返回一个地理数据对象position作为参数。position对象有timestamp和coords这2个属性。timestamp表示该地理数据创建时间（时间戳），coords表示地理状态，包括7个属性，如下。coords.longitudecoords.latitudecoords.accuracycoords.altitudecoords.altitudeAccuracycoords.headingcoords.speed（3）errorCallbackerrorCallback回调函数返回一个错误数据对象error作为参数，包括message和code这2个属性。message表示错误信息，code表示错误代码，错误代码包含4个值。error.PERMISSION_DENIEDerror.POSITION_UNAVAILABLEerror.TIMEOUTerror.UNKNOWN_ERROR（3）optionsoptions的数据格式为JSON，有3个可选的属性，即enableHighAccuracy、maximumAge和timeout。enableHighAcuracy表示是否启用高精确度模式，默认值为false。如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。timeout表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback函数，默认不限时，单位为毫秒。maximumAge表示浏览器重新获取位置信息的时间间隔。3.watchPosition()方法watchPosition()方法监视当前用户地理位置信息，其功能与getCurrentPosition()方法相似，同样拥有3个参数，与getCurrentPosition()相同。但watchPosition()方法是定期轮询设备的位置，不停地获取和更新用户的地理位置信息，执行间隔时间，当设备地理位置发生改变时，自动调用。watchPosition()方法的语法格式如下所示。varid=navigator.geolocation.watchPosition(successCallback,errorCallback,options);watchPosition()函数会返回一个ID，唯一地标记该位置监视器，可以将这个ID传给clearWatch()函数来停止监视用户位置。4.clearWatch()方法clearWatch()方法停止监视当前用户地理位置信息，配合watchPosition()方法使用，用于停止watchPosition()轮询。clearWatch()方法的语法格式如下所示。navigator.geolocation.clearWatch(id);参数id为移除的监听器所对应的Geolocation.watchPosition()方法返回的ID数字。（三）案例讲解讲解使用百度地图API实现地理定位案例。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用本章课后作业。第五学时（canvas的基本使用、canvas绘制图形和文本）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握canvas的基本使用掌握canvas绘制图形和文本二、知识讲解（一）canvas的基本使用1.概述HTML5的canvas画布可通过JavaScript脚本语言在网页上绘制图形。canvas画布是一个矩形区域，可以控制其每一个像素，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas画布通过JavaScript来绘制2D图形，是逐像素进行渲染的。2.创建canvas画布在HTML页面添加一个canvas画布，具体用法如下所示。<canvasid="myCanvas"width="400"height="300"></canvas>在<canvas>标签中，通常需要指定一个id属性，以便于JavaScript获取canvas元素，而width和height属性定义的画布的大小。3.使用canvas画布canvas画布本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。使用canvas画布有3个基本步骤，使用步骤如下所示。第一步，在JavaScript的DOM操作中，通过元素的id属性获取canvas画布。第二步，根据canvas对象取得绘图上下文，需要调用getContext()方法，并传入上下文参数“2d”。绘图上下文包含所有绘制方法和属性的定义。第三步，基于绘图上下文环境，调用绘制方法进行绘图。（二）canvas绘制图形1.路径（1）定义canvas图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。在本质上，路径是由很多子路径构成的，这些子路径都是在一个列表中，所有的子路径（线、弧形等）构成图形。（2）绘制图形的步骤创建路径起始点。调用绘制方法绘制路径。将路径封闭。一旦路径生成，通过描边或填充路径区域来渲染图形。（3）绘制图形的方法beginPath()moveTo(x,y)lineTo(xₒ,yₒ)closePath()stroke()fill()clip()save()restore()2.线条以及填充颜色（1）fillStyle填充样式fillStyle设置或返回用于填充绘画的颜色、渐变或模式，需要在填充前声明才有效，其语法格式如下所示。ctx.fillStyle=color|gradient|pattern;在上述语法中，color指示绘图填充色的CSS颜色值，默认值是#000000。gradient用于填充绘图的渐变对象。pattern用于填充绘图的pattern对象。（2）strokeStyle线条样式strokeStyle设置或返回用于笔触的颜色、渐变或模式，需要在绘制前声明才有效，其语法格式如下所示。ctx.strokeStyle=color|gradient|pattern;strokeStyle线条样式与fillStyle填充样式属性值相似。（3）lineWidth线条宽度lineWidth设置或返回当前的线条宽度，其语法格式如下所示。ctx.lineWidth=number;在上述语法中，number为当前线条的宽度，以像素计。（4）lineCap线条结束端点样式lineCap设置或返回线条的结束端点样式，其语法格式如下所示。ctx.lineCap="butt|round|square";在上述语法中，butt为默认值默认，表示向线条的每个末端添加平直的边缘。round表示向线条的每个末端添加圆形线帽。square表示向线条的每个末端添加正方形线帽。而round和square会使线条略微变长。（5）lineJoin线条拐角类型lineJoin设置或返回两条线相交时，所创建的拐角类型。其语法格式如下所示。ctx.lineJoin="bevel|round|miter";在上述语法中，miter为默认值，用于创建尖角。bevel用于创建斜角。Round用于创建圆角。3.绘制矩形​canvas画布只支持一种原生的图形绘制——矩形。所有其他图形都至少需要生成一种路径，不过，由于canvas画布拥有众多生成路径的方法，利用这些方法可以绘制出复杂的图形。canvas画布绘制矩形有3种方法。fillRect(x,y,width,height)绘制一个填充的矩形，默认填充颜色为黑色。strokeRect(x,y,width,height)绘制一个矩形的边框。clearRectx,y,width,height)清除指定的矩形区域，这块区域会变得完全透明。以上3个方法具有相同的参数，x表示矩形的x坐标，y表示矩形的y坐标，width和height分别表示矩形的宽度和高度。4.绘制弧形（1）语法格式arc()方法用于绘制弧形或圆形，其语法格式如下所示。ctx.arc(x,y,radius,startingAngle,endingAngle,counterclockwise);在上述语法中，x,y表示圆的中心坐标。radius表示圆的半径。startingAngle和endingAngle表示开始位置和结束位置，以弧度计。弧的圆形的三点钟位置是0度。counterclockwise为可选参数，规定应该逆时针还是顺时针绘图，值为true时顺时针绘制，值为false时逆时针绘制。（2）演示说明在canvas画布中绘制一个扇形。（三）canvas绘制文本canvas画布中不仅可以绘制图形，还可以绘制文本。绘制文本，既可以使用填充方法，也可以使用勾勒方法。1.方法canvas画布提供了2种方法来渲染文本。fillText()方法在画布上绘制填色的文本，即填充绘制文本，文本的默认颜色是黑色。strokeText()方法在画布上绘制文本（没有填色），即描边绘制文本，文本的默认颜色是黑色。2.语法格式fillText()方法和strokeText()方法的语法格式如下所示。fillText()方法：ctx.fillText(text,x,y,maxWidth);//填充绘制文本strokeText()方法：ctx.strokeText(text,x,y,maxWidth);//描边绘制文本在上述语法中，2种方法的参数相同。text为画布上输出的文本，x为相对于画布绘制文本的x坐标位置，y为相对于画布绘制文本的y坐标位置，maxWidth为允许的最大文本宽度，以像素计，是一个可选参数。3.文本样式属性为保证文本在各浏览器下显示一致，需要设置文本的样式属性。fonttextBaselinetextAlign三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用第一章课后作业。第六学时（canvas图像、canvas变形、<svg>标签）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握canvas图像和变形掌握<svg>标签二、知识讲解（一）canvas图像在canvas中使用drawImage()方法可以在画布上绘制图像、画布或视频。drawImage()方法还能够绘制图像的某些部分，以及增加或减少图像的尺寸。1.语法格式drawImage()方法绘制图像有3种方式，第1种方式在画布上定位图像，其语法格式如下所示。ctx.drawImage(img,x,y);在第1种方式中，drawImage()方法有3个参数，img表示规定要使用的图像、画布或视频，x表示在画布上放置图像的x坐标位置，y表示在画布上放置图像的y坐标位置。第2种方式在画布上定位图像，并规定图像的宽度和高度，其语法格式如下所示。ctx.drawImage(img,x,y,width,height);在第2种方式中，drawImage()方法有5个参数，width表示可设置图像的宽度，height表示可设置图像的高度。第3种方式在画布上剪切图像，并在画布上定位被剪切的部分，其语法格式如下所示。ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);在第3种方式中，drawImage()方法有9个参数，sx表示开始剪切的x坐标位置，sy表示开始剪切的y坐标位置，swidth表示被剪切图像的宽度，sheight表示被剪切图像的高度。2.获取方式在canvas中，获取图像对象的方式有2种，具体说明如下。第1种方式，在window.onload事件处理器中，获取已有图片对象，然后在canvas中安全绘制图片。第2种方式，创建图像对象，然后在图像对象img.onload事件处理器中安全地把图片绘制在canvas中。（二）c