HTML5+CSS3+JavaScript-第8章-教學設計

學IT有疑問，就找千問千知千里尋他眾百度,鋒自苦寒磨礪出千鋒教育HTML5+CSS3+JavaScript網頁設計基礎與實戰(zhàn)教學設計課程名稱：HTML5+CSS3+JavaScript網頁設計基礎與實戰(zhàn)_____授課年級：_______________________授課學期：_______________________教師姓名：_______________________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圖像與變形【思政育人目標】培養(yǎng)學生健康的審美觀念引導學生在學習中健全職業(yè)道德的規(guī)范。引導學生創(chuàng)新思維和探索的科學精神。教學重點掌握<video>標簽和<audio>標簽的應用、掌握getCurrentPosition()方法的使用、能夠使用canvas繪制圖形和文本教學難點實現本章節(jié)的3個小節(jié)案例教學方式課堂講解配合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.優(yōu)勢跨平臺、好升級、好維護，相對于原生APP其開發(fā)成本較低。具有良好的移動支持，比如支持手勢，本地存儲和視頻續(xù)播等，通過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屬性規(guī)定媒體文件的URL地址，type屬性規(guī)定資源的媒體類型。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）回顧上課前的學習目標，對本節(jié)課知識點進行總結。（2）使用本章課后作業(yè)。第二學時（<audio>標簽、DOM操作媒體文件）一、回顧上節(jié)課內容（1）對上節(jié)課布置的作業(yè)以及學生提出的問題進行答疑解惑。（2）回顧上節(jié)課內容，引出本節(jié)課主題。（3）明確學習方向。掌握<audio>標簽熟練使用DOM操作媒體文件二、知識講解（一）<audio>標簽1.定義<audio>標簽定義聲音，比如音樂或其他音頻流。<audio>標簽是HTML5的新標簽，使用<audio>標簽可以在網頁上直接插入音頻文件，而不需要任何第三方插件。2.音頻格式<audio>標簽支持的音頻格式有MP3、Vorbis和Wav。MP3是一種音頻壓縮技術，其全稱為動態(tài)影像專家壓縮標準音頻層面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）回顧上課前的學習目標，對本節(jié)課知識點進行總結。（2）使用本章課后作業(yè)。第三學時（BOM、window對象）一、回顧上節(jié)課內容（1）對上節(jié)課布置的作業(yè)以及學生提出的問題進行答疑解惑。（2）回顧上節(jié)課內容，引出本節(jié)課主題。（3）明確學習方向。了解BOM二、知識講解（一）BOM1.了解BOM瀏覽器對象模型(BrowserObjectModel，BOM)提供了獨立于內容但可以與瀏覽器窗口進行交互的對象，使JavaScript有能力與瀏覽器“對話”?！皩υ挕敝笇g覽器的操作，如改變窗口大小、打開新窗口、關閉窗口、彈出對話框、進行導航以及獲取客戶的一些信息(如瀏覽器名稱、版本和屏幕分辨率)等。（二）window對象1.定義在BOM中利用window對象獲取瀏覽器窗口，BOM是一個分層結構，window對象是整個BOM的核心（頂層）對象，表示瀏覽器中打開的窗口。在瀏覽器中打開網頁時，首先看到的是瀏覽器窗口，即頂層的window對象，可以使用window標識符引用?！绊攲訉ο蟆笔侵缸罡咭粚拥膶ο螅渌袑ο蠖际撬南聦?。JavaScript中規(guī)定，瀏覽器環(huán)境的所有全局變量都是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，數量包含所有歷史記錄數，即所有可前進和后退的記錄數量。出于安全方面的考慮，開發(fā)人員無法獲取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）回顧上課前的學習目標，對本節(jié)課知識點進行總結。（2）使用本章課后作業(yè)。第四學時（地理定位、navigator.geolocation屬性）一、回顧上節(jié)課內容（1）對上節(jié)課布置的作業(yè)以及學生提出的問題進行答疑解惑。（2）回顧上節(jié)課內容，引出本節(jié)課主題。（3）明確學習方向。了解地理定位掌握navigator.geolocation屬性的使用二、知識講解（一）地理定位1.概述HTML5的GeolocationAPI（地理位置應用程序接口）用于獲得用戶的地理位置，鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。地理定位（Geolocation）是通過HTML5技術獲取到經緯度值，再配合第三方的地圖API接口，便可以展現當前應用所在的位置。2.地理位置獲取流程（1）打開需要獲取位置的web應用。（2）應用向瀏覽器請求地理位置，詢問用戶是否允許獲取當前位置信息。（3）如果用戶允許，瀏覽器從設備上獲取信息。（4）瀏覽器將獲取到的信息發(fā)送到一個信任的位置服務器，服務器返回地理信息。（5）瀏覽器持續(xù)追蹤用戶的地理位置（6）需要與第三方地圖API配合，交互呈現位置信息。3.關于地圖API目前常用的第三方地圖API為百度地圖API，用戶可在網站上搜索“百度地圖開放平臺”進入API（應用程序接口），根據需要選擇相關的開發(fā)文檔實現地理定位。（1）介紹百度地圖JavaScriptAPIGLv1.0是一套由JavaScript語言編寫的應用程序接口，可幫助用戶在網站中構建功能豐富、交互性強的地圖應用，支持PC端和移動端基于瀏覽器的地圖應用開發(fā)，且支持HTML5特性的地圖開發(fā)。百度地圖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為獲取位置信息成功時執(zhí)行的回調函數，返回的數據中包含經緯度等信息，結合第三方地圖API即可在地圖中顯示當前用戶的位置信息。errorCallback為獲取位置信息失敗時執(zhí)行的回調函數，可以根據錯誤類型提示信息。options可用來設置更精細的定位。（2）successCallbacksuccessCallback回調函數返回一個地理數據對象position作為參數。position對象有timestamp和coords這2個屬性。timestamp表示該地理數據創(chuàng)建時間（時間戳），coords表示地理狀態(tài)，包括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表示瀏覽需要在指定的時間內獲取位置信息，否則觸發(fā)errorCallback函數，默認不限時，單位為毫秒。maximumAge表示瀏覽器重新獲取位置信息的時間間隔。3.watchPosition()方法watchPosition()方法監(jiān)視當前用戶地理位置信息，其功能與getCurrentPosition()方法相似，同樣擁有3個參數，與getCurrentPosition()相同。但watchPosition()方法是定期輪詢設備的位置，不停地獲取和更新用戶的地理位置信息，執(zhí)行間隔時間，當設備地理位置發(fā)生改變時，自動調用。watchPosition()方法的語法格式如下所示。varid=navigator.geolocation.watchPosition(successCallback,errorCallback,options);watchPosition()函數會返回一個ID，唯一地標記該位置監(jiān)視器，可以將這個ID傳給clearWatch()函數來停止監(jiān)視用戶位置。4.clearWatch()方法clearWatch()方法停止監(jiān)視當前用戶地理位置信息，配合watchPosition()方法使用，用于停止watchPosition()輪詢。clearWatch()方法的語法格式如下所示。navigator.geolocation.clearWatch(id);參數id為移除的監(jiān)聽器所對應的Geolocation.watchPosition()方法返回的ID數字。（三）案例講解講解使用百度地圖API實現地理定位案例。三、知識鞏固（1）回顧上課前的學習目標，對本節(jié)課知識點進行總結。（2）使用本章課后作業(yè)。第五學時（canvas的基本使用、canvas繪制圖形和文本）一、回顧上節(jié)課內容（1）對上節(jié)課布置的作業(yè)以及學生提出的問題進行答疑解惑。（2）回顧上節(jié)課內容，引出本節(jié)課主題。（3）明確學習方向。掌握canvas的基本使用掌握canvas繪制圖形和文本二、知識講解（一）canvas的基本使用1.概述HTML5的canvas畫布可通過JavaScript腳本語言在網頁上繪制圖形。canvas畫布是一個矩形區(qū)域，可以控制其每一個像素，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。canvas畫布通過JavaScript來繪制2D圖形，是逐像素進行渲染的。2.創(chuàng)建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”。繪圖上下文包含所有繪制方法和屬性的定義。第三步，基于繪圖上下文環(huán)境，調用繪制方法進行繪圖。（二）canvas繪制圖形1.路徑（1）定義canvas圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。在本質上，路徑是由很多子路徑構成的，這些子路徑都是在一個列表中，所有的子路徑（線、弧形等）構成圖形。（2）繪制圖形的步驟創(chuàng)建路徑起始點。調用繪制方法繪制路徑。將路徑封閉。一旦路徑生成，通過描邊或填充路徑區(qū)域來渲染圖形。（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設置或返回兩條線相交時，所創(chuàng)建的拐角類型。其語法格式如下所示。ctx.lineJoin="bevel|round|miter";在上述語法中，miter為默認值，用于創(chuàng)建尖角。bevel用于創(chuàng)建斜角。Round用于創(chuàng)建圓角。3.繪制矩形?canvas畫布只支持一種原生的圖形繪制——矩形。所有其他圖形都至少需要生成一種路徑，不過，由于canvas畫布擁有眾多生成路徑的方法，利用這些方法可以繪制出復雜的圖形。canvas畫布繪制矩形有3種方法。fillRect(x,y,width,height)繪制一個填充的矩形，默認填充顏色為黑色。strokeRect(x,y,width,height)繪制一個矩形的邊框。clearRectx,y,width,height)清除指定的矩形區(qū)域，這塊區(qū)域會變得完全透明。以上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為可選參數，規(guī)定應該逆時針還是順時針繪圖，值為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）回顧上課前的學習目標，對本節(jié)課知識點進行總結。（2）使用第一章課后作業(yè)。第六學時（canvas圖像、canvas變形、<svg>標簽）一、回顧上節(jié)課內容（1）對上節(jié)課布置的作業(yè)以及學生提出的問題進行答疑解惑。（2）回顧上節(jié)課內容，引出本節(jié)課主題。（3）明確學習方向。掌握canvas圖像和變形掌握<svg>標簽二、知識講解（一）canvas圖像在canvas中使用drawImage()方法可以在畫布上繪制圖像、畫布或視頻。drawImage()方法還能夠繪制圖像的某些部分，以及增加或減少圖像的尺寸。1.語法格式drawImage()方法繪制圖像有3種方式，第1種方式在畫布上定位圖像，其語法格式如下所示。ctx.drawImage(img,x,y);在第1種方式中，drawImage()方法有3個參數，img表示規(guī)定要使用的圖像、畫布或視頻，x表示在畫布上放置圖像的x坐標位置，y表示在畫布上放置圖像的y坐標位置。第2種方式在畫布上定位圖像，并規(guī)定圖像的寬度和高度，其語法格式如下所示。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種方式，創(chuàng)建圖像對象，然后在圖像對象img.onload事件處理器中安全地把圖片繪制在canvas中。（二）c