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

1、復(fù)習(xí)：HTML5 新特性：(1)新的語義和屬性(2)表單 2.0(3) (4)Canvas 繪圖 重點(diǎn) (5)SVG 繪圖(6)地理定位 (7)拖放 API(8)WebWorker (9)WebStorage (10)WebSocketJS 繪圖技術(shù)： var ctx = c.getContext(2d);/常用屬性ctx.fillStyle = 顏色/漸變對(duì)象 ctx.strokeStyle =顏色/漸變對(duì)象 ctx.lineWidth = 1ctx.font = 10px sans-serif ctx.textBaseline = alphabetic ctx.shadowColor =

2、rgba(0,0,0,0) ctx.shadowOffsetX = 0ctx.shadowOffsetY = 0ctx.shadowBlur = 0/常用方法 (1)繪制矩形ctx.fillRect(x, y, w, h) ctx.strokeRect(x, y, w, h) ctx.clearRect(x, y, w, h) (2)繪制文本 ctx.fillText(txt, x, y) ctx.strokeText(txt, x, y)ctx.measureText(txt).width (3)繪制路徑(4)繪制圖像今日目標(biāo)：(1)使用 Canvas 繪制路徑和圖像 重點(diǎn)&難點(diǎn)(2)使用第

3、繪圖工具 Chart.js，掌握1.使用 Canvas 繪制路徑(Path)提示：Canvas 中的路徑概念與Photoshop 中鋼筆工具類似的。路徑本身是不可見的，有三個(gè)用途：描邊、填充(閉合)、裁剪(閉合)Canavs 中與路徑繪制相關(guān)方法：ctx.beginPath() ctx.closePath() ctx.moveTo(x, y) ctx.lineTo(x,y) ctx.arc() ctx.ellipse()/開始一條新路徑/閉合路徑，讓最后一個(gè)/移動(dòng)到指定點(diǎn)自動(dòng)連接到第一個(gè)/從當(dāng)前點(diǎn)到指定點(diǎn)繪制直線路徑/繪制拱形路徑/繪制橢圓路徑ctx.bezierCurveTo()/繪制曲線路

4、徑-ctx.stroke() ctx.fill() ctx.clip()練習(xí)：(1)使用直線路徑繪制坐標(biāo)軸(2)使用圓拱+定時(shí)器繪制可以前進(jìn)的進(jìn)度條(3)創(chuàng)建一個(gè)函數(shù)：openMouth()，在畫布上繪制如下的圖形：(4)創(chuàng)建一個(gè)函數(shù)：closeMouth()，在畫布上繪制如下的圖形：(5)使用定時(shí)器，不停的調(diào)用 openMouth()和 closeMouth()2.使用Canvas 繪制圖像提示：的定位點(diǎn)在的左上角。客戶端 JS 必須等待加載完成才能開始繪制。var img = new Image(); img.src = x.jpg; img.onload = function()/已經(jīng)加

5、載完成了ctx.drawImage(img, x, y)/使用默認(rèn)的寬高ctx.drawImage(img, x, y, w, h)練習(xí)：(1)在畫布的四個(gè)角各繪制一個(gè)小飛機(jī)(2)在畫布的繪制一個(gè) 2 倍標(biāo)準(zhǔn)大小的飛機(jī)*繪制一個(gè)可以隨著鼠標(biāo)而移動(dòng)的小飛機(jī)，提示需要使用 mousemove注意：Canvas 繪圖中，只有一個(gè)HTML 元素canvas！其它圖形圖像都不是元素，不能綁定事件函數(shù)！*繪制一個(gè)可以左右移動(dòng)的小飛機(jī)*繪制一個(gè)可以在畫布范圍內(nèi)走斜線移動(dòng)的小飛機(jī)碰到畫布的任何一個(gè)邊緣，立即反彈3.繪圖上下文的狀態(tài)改變和恢復(fù) 難點(diǎn)&晦澀var ctx = canvas.getContext(2

6、d);/可以將繪圖上下文對(duì)象（即畫筆對(duì)象）進(jìn)行變形(transform)與對(duì) Canvas 施加CSS Transform 樣式不同，繪圖上下文的變形只影響當(dāng)前繪制的圖形圖像內(nèi)容ctx.translate(x,y) ctx.roe(deg) ctx.scale()/坐標(biāo)軸原點(diǎn)平移到指定點(diǎn)，所有點(diǎn)的坐標(biāo)都發(fā)生改變/畫筆旋轉(zhuǎn)，則內(nèi)容旋轉(zhuǎn)，軸點(diǎn)在坐標(biāo)軸原點(diǎn)/畫筆縮放=ctx.save() ctx.restore()/保存繪圖上下文(畫筆）當(dāng)前的變形數(shù)據(jù)/恢復(fù)最近一次保存的畫筆的變形相關(guān)的狀態(tài)練習(xí)：*有點(diǎn)坑繪制四個(gè)小飛機(jī)，各在畫布的一個(gè)角在繞著自己的中心在旋轉(zhuǎn)。項(xiàng)目中Canvas 技術(shù)的主要用途：(1

7、)繪制統(tǒng)計(jì)圖 (2)小繪圖板動(dòng)態(tài)的背景（帶交互帶動(dòng)畫）小結(jié)：Canvas 繪圖可以繪制的內(nèi)容：(1)矩形： ctx.fillRect() ctx.strokeRect()ctx.clearRect() (2)文本： ctx.fillText()ctx.strokeText()ctx.measureText() (3)路徑 - 描邊/填充/裁剪ctx.beginPath()ctx.closePath() ctx.moveTo()ctx.lineTo()ctx.arc() ctx.stroke() ctx.fill()ctx.clip()(4)圖像： ctx.drawImage() (5)4.使用

8、第統(tǒng)計(jì)圖繪制工具Chart.js重點(diǎn)在于過程提示：第的繪圖工具非常多！直接“JS 繪圖工具”！第工具的使用步驟：(1)打開官網(wǎng)，看工具介紹Simple yet flexible JavaScript charting for designers & developers。一款開源的、提供了 8 中圖表的、基于Canvas、響應(yīng)式圖表繪制工具庫。(2)參考DEMO，編寫示例程序new Chart(canvasId, type: bar,data: , options: /圖表的類型，共 8 中/圖表必需的數(shù)據(jù)/可選項(xiàng));(3)查看Aocument，實(shí)現(xiàn)自己的項(xiàng)目需求參考手冊(cè)中的示例代碼課后練習(xí)：1) 使用Canvas 繪制一個(gè)隨機(jī)改變的var str = ABCDEFGHJKLMNPQRSTWXY3456789;var char = str 0字符串長度間的隨機(jī)數(shù) ;要求：畫布背景顏色隨機(jī)(淺色) ctx.fil