1、復習：HTML5 新特性：新的語義和屬性表單新特性新的 input type10 個、url、number、search、range、color、date、month、新的表單元素4 個datalist、progress、meter、output 3)表單元素的新屬性12 個plete、autofocus、placeholder、multiple、form required、maxlength、minlength、max、min、step、patternk(3)和音頻Canvas 繪圖SVG 繪圖地理定位 (7)拖放 API(8)WebWorker (9)WebStorage (10)WebS

2、ocket今日目標：(1)和音頻 簡單必須掌握(2)Canvas 繪圖 重點&難點1.面試題：Flash 被HTML5 取代在哪些方面？音頻和繪圖 動畫/統(tǒng)計圖表 客戶端數據 和 +定時器 、 WebStorage2.HTML5 新特性HTML5 提供了一個新的使用方法：，用于。該默認是一個300*150 的inline-block。soursourrc=x.mp4 rc=x.ogg rc=x.webm/元素/對象的屬性：(1)src：指定要的的資源路徑(2)autoplay：false，是否自動(3)controls：false，是否顯示 (4)currentTime：0，當前控件，提示：不

3、同瀏覽器的的時間點（s）控件外觀不同(5)duration：60，影片總時長（s） (6)ended：false，是否到結尾 (7)loop：false，是否循環(huán) (8)muted：false，是否靜音(9)volume：1，音量設置（01），對象屬性，不用于 (10)paused：當前是否處于暫停狀態(tài)(11)ter：，指定第一幀前的海報(12)preload：指定預加載方案，可取值：auto：默認值，自動預加載的寬高、時長、第一幀內容、并緩沖了一定的時長metadata：元數據，只預加載 none：不預加載任何內容對象的方法： play()：開始 pause()：暫停對象的事件：的寬高、時長

4、、第一幀內容onplay： onpause： onplaying:開始（可能多種原因引起）開始暫停（可能多種原因引起）練習：(1)不使用默認的控件，使用自定義的按鈕，控制的和暫停(2)不論何種原因，影片一暫停即顯示出；一就隱藏；提示：不能使用ter 屬性（影片海報只能在第一次之前顯示一次）午間思考：如何將作為DIV 的背景并自動？3.HTML5 新特性音頻HTML5 提供了一個新的，用于音頻。該若沒有 controls 屬性，則默認display:none；反之則是一個 300*30 的 inline-block。使用方法：soursoursourrc=x.mp3 rc=x.ogg rc=x.

5、wavAUDIO 元素/對象的屬性：(1)src：指定要的的資源路徑(2)autoplay：false，是否自動 (3)controls：false，是否顯示控件，提示：不同瀏覽器的控件外觀不同(4)currentTime：0，當前的時間點（s）(5)duration：60，影片總時長（s） (6)ended：false，是否到結尾 (7)loop：false，是否循環(huán) (8)muted：false，是否靜音volume：1，音量設置（01），對象屬性，不用于paused：當前是否處于暫停狀態(tài)(12)preload：指定預加載方案，可取值：auto：默認值，自動預加載的寬高、時長、第一幀內容、

6、并緩沖了一定的時長metadata：元數據，只預加載 none：不預加載任何內容AUDIO 對象的方法： play()：開始 pause()：暫停 AUDIO 對象的事件：的寬高、時長、第一幀內容onplay：開始（可能多種原因引起）onpause： onplaying:開始暫停（可能多種原因引起）練習：為網頁添加自動的背景音樂，用戶可選暫停或繼續(xù)可以使用定時器修改audio.volume 屬性實現音量淡入和淡出。提示：(1)屬性是老 IE 的專有屬性，也可以用于停止都無法精準的控制。其它瀏覽器不支持此屬性。背景音樂，但音量、靜音、暫停、(2)當前 iOS 中的 Safari 瀏覽器默認不支持

7、audio！只能使用代替。Web 前端中可用的繪圖技術在網頁中繪圖可以使用的功能：實時走勢圖 (2)統(tǒng)計圖表 (3)隨機內容的(4)畫圖板(5)HTML52D/3D可用的繪圖技術：(1)Canvas 技術 于繪制 2D 圖形/圖像(2)SVG 技術 于繪制矢量圖(3)WebGL 技術 目前不是HTML5 標準技術，功能最強大，3D 圖形/圖像5.Canvas 繪圖技術 最重要&難點HTML5 引入了用于繪圖，默認是一個 300*150 的 inline-block。使用 width/height 屬性指定尺寸，但不能使用CSS 樣式指定寬和高！您的瀏覽器不支持Canvas！往“畫布”上繪圖需要

8、使用其對應的“畫筆”對象：var ctx = c.getContext(2d); /繪圖上下文“畫筆”接下來所有的繪圖任務都由畫筆實現。Content：內容 Context：上下文繪圖上下文對象的常用屬性console.log(ctx)： fillStyle：#000，填充樣式 strokeStyle：#000，描邊/輪廓樣式 lineWidth：1，描邊/輪廓的寬度font：10px sans-serif，繪制文本所用的字號/字體 textBaseline：alphabetic，文本對齊的基線 showdowOffsetX：0，陰影水平偏移量 showdowOffsetY：0，陰影豎直偏移量

9、 showdowColor：rgba(0,0,0,0)，陰影顏色 showdowBlur：0，陰影模糊半徑6.使用 Canvas 繪制矩形提示：矩形的定位點在自己左上角ctx.fillStyle = #000ctx.strokeStyle = #000 ctx.fillRect(x,y,w,h) ctx.strokeRect(x,y,w,h) ctx.clearRect(x,y,w,h)填充顏色描邊顏色填充一個矩形描邊一個矩形清除一個矩形范圍內的所有內容練600*400 的畫布上繪圖 16:10難點： (1)小學/中學數學知識(2)單詞(1)左上角填充一個矩形 100*80，默認顏色 (2)右

10、上角描邊一個矩形 100*80，默認顏色 (3)左下角填充一個矩形 100*80，紅色(4)右下角描邊一個矩形 100*80，青色(5)正填充+描邊一個矩形 100*80，注意是什么顏色(6)重新創(chuàng)建一個畫布，使用定時器，繪制一個可以不斷向右移動的矩形 (7)繪制一個斜向 30 度角移動的矩形課下性任務：繪制一個繞圓形路徑移動的矩形7.使用 Canvas 繪制文本提示：文字的定位點默認在文本基線的起點(左側)ctx.textBaseline = alphabetic文本基線，可取為 tottom/middle/alphabeticctx.fillText(txt, x, y) ctx.stro

11、keText(txt, x, y)填充文本描邊文本ctx.measureText(txt).width 測量，根據當前指定的字號和字體計算指定文本的寬度練習：繪制文本(1)在左下角繪制一行文本 (2)在右下角描邊一行文本(3)在畫布繪制一個可以向右移動的文本，向戶外LED 招牌一樣課下性任務：繪制可以畫布上左右移動的文字使用 Canvas 繪制路徑下次課內容使用 Canvas 繪制圖像下次課內容10.為圖形文字添加陰影ctx.shadowColor = #666; /陰影顏色ctx.shadowOffsetX = 8;ctx.shadowOffsetY = 8;ctx.shadowBlur =

12、 10;/陰影偏移量/陰影模糊半徑11.在繪圖時使用漸變色/創(chuàng)建漸變對象 var g = ctx.creainearGradient(50,100, 550,100);g.addColorStop(0, #f00); /添加顏色點 g.addColorStop(1, #0f0); /添加顏色點/使用漸變對象ctx.fillStyle = g; ctx.strokeStyle = g;課后練習：(1)使用做DIV 元素的背景提示：自動、循環(huán)、靜音，絕對定位到目標元素下面，z-index 為負值即可(2)使用 AJAX 從服務器端的頁面獲取如下的 JSON 數據：label: 部門 1, valu