day1新的語義標(biāo)簽和屬性

1、復(fù)習(xí)：HTML5 新特性：新的語義和屬性表單新特性新的 input type10 個(gè)、url、number、search、range、color、date、month、新的表單元素4 個(gè)datalist、progress、meter、output 3)表單元素的新屬性12 個(gè)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今日目標(biāo)：(1)和音頻 簡單必須掌握(2)Canvas 繪圖 重點(diǎn)&難點(diǎn)1.面試題：Flash 被HTML5 取代在哪些方面？音頻和繪圖 動畫/統(tǒng)計(jì)圖表 客戶端數(shù)據(jù) 和 +定時(shí)器 、 WebStorage2.HTML5 新特性HTML5 提供了一個(gè)新的使用方法：，用于。該默認(rèn)是一個(gè)300*150 的inline-block。soursourrc=x.mp4 rc=x.ogg rc=x.webm/元素/對象的屬性：(1)src：指定要的的資源路徑(2)autoplay：false，是否自動(3)controls：false，是否顯示 (4)currentTime：0，當(dāng)前控件，提示：不

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

4、、第一幀內(nèi)容onplay： onpause： onplaying:開始（可能多種原因引起）開始暫停（可能多種原因引起）練習(xí)：(1)不使用默認(rèn)的控件，使用自定義的按鈕，控制的和暫停(2)不論何種原因，影片一暫停即顯示出；一就隱藏；提示：不能使用ter 屬性（影片海報(bào)只能在第一次之前顯示一次）午間思考：如何將作為DIV 的背景并自動？3.HTML5 新特性音頻HTML5 提供了一個(gè)新的，用于音頻。該若沒有 controls 屬性，則默認(rèn)display:none；反之則是一個(gè) 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，當(dāng)前的時(shí)間點(diǎn)（s）(5)duration：60，影片總時(shí)長（s） (6)ended：false，是否到結(jié)尾 (7)loop：false，是否循環(huán) (8)muted：false，是否靜音volume：1，音量設(shè)置（01），對象屬性，不用于paused：當(dāng)前是否處于暫停狀態(tài)(12)preload：指定預(yù)加載方案，可取值：auto：默認(rèn)值，自動預(yù)加載的寬高、時(shí)長、第一幀內(nèi)容、

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

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

8、使用其對應(yīng)的“畫筆”對象：var ctx = c.getContext(2d); /繪圖上下文“畫筆”接下來所有的繪圖任務(wù)都由畫筆實(shí)現(xiàn)。Content：內(nèi)容 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 繪制矩形提示：矩形的定位點(diǎn)在自己左上角ctx.fillStyle = #000ctx.strokeStyle = #000 ctx.fillRect(x,y,w,h) ctx.strokeRect(x,y,w,h) ctx.clearRect(x,y,w,h)填充顏色描邊顏色填充一個(gè)矩形描邊一個(gè)矩形清除一個(gè)矩形范圍內(nèi)的所有內(nèi)容練600*400 的畫布上繪圖 16:10難點(diǎn)： (1)小學(xué)/中學(xué)數(shù)學(xué)知識(2)單詞(1)左上角填充一個(gè)矩形 100*80，默認(rèn)顏色 (2)右

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

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

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