level one資料 level one全部錄播課資料 52 html5 lesson3 HTML5

1、HTML5,講師： 董美琪,01,Canvas畫布,Canvas應(yīng)用場(chǎng)景,游戲 圖表 動(dòng)畫 codepen.io （HTML5 動(dòng)效）,Canvas發(fā)展歷史,最早在apple的safari 1.3中引入 ie9之前的瀏覽器不支持canvas ,如何使canvas,1. 添加canvas標(biāo)簽 2. 獲得canavs元素 var canvas =document.getElementById(myCanvas); 3. 獲得canvas上下文對(duì)象 var ctx = canvas.getContext(2d),兩個(gè)對(duì)象,1. 元素對(duì)象（canvas元素）和上下文對(duì)象（通過(guò)getContext(2d

2、)方法獲取到的CanvasRenderingContext2D對(duì)象） 2. 元素對(duì)象相當(dāng)于我們的畫布，上下文對(duì)象相當(dāng)于畫筆， 我們接下來(lái)的所有操作是基于上下文對(duì)象的,繪制線段,ctx.moveTo(x, y); 移動(dòng)到 x，y坐標(biāo)點(diǎn) ctx.lineTo(x, y); 從當(dāng)前點(diǎn)繪制直線到x，y點(diǎn) ctx.stroke(); 描邊 ctx.lineWidth = 20; 設(shè)置線段寬度 ctx.closePath(); 閉合當(dāng)前路徑 和回到起始點(diǎn)的區(qū)別 ctx.fill(); 填充,路徑與填充,1.fill和stroke方法都是作用在當(dāng)前的所有子路徑 2.完成一條路徑后要重新開(kāi)始另一條路徑時(shí)必須使

3、用beginPath()方法, betinPath開(kāi)始子路徑的一個(gè)新的集合,課堂小驛站,下面代碼執(zhí)行的結(jié)果是什么,繪制矩形,ctx.rect(x, y, dx, dy); ctx.fillRect(x, y, dx, dy); ctx.strokeRect(x, y, w, h);,橡皮擦,ctx.clearRect(x, y, dx, dy); 實(shí)現(xiàn)矩形落地動(dòng)畫,方塊降落效果,var y = 100; function drawRect(y) ctx.fillRect(100, y, 30, 30); var timer = setInterval(function () ctx.clear

4、Rect(0, 0, w, h); drawRect(y); y += 10; if(y 470) clearInterval(timer); drawRect(470); , 50),這是最開(kāi)始的雪花,這是下一個(gè)狀態(tài)的雪花,變化之后 清空畫布重新畫就好了 定時(shí)器每擱一定的時(shí)間清除畫布 然后重新畫這個(gè)雪花 畫的樣子就是下一個(gè)狀態(tài)的雪花的樣子,繪制弧形,arc(x, y, r, 起始弧度, 結(jié)束弧度,弧形的方向 ) 角 以弧度計(jì)，0順時(shí)針 1逆時(shí)針 2 * Math.PI = 360deg,0,Math.pi/2,練習(xí),繪制圓角,ctx.arcTo(x1, y1, x2, y2, r) 2. 繪

5、制的弧線與當(dāng)前點(diǎn)和x1,y1連線，x1,y1和x2,y2連線都相切,繪制圓角矩形,貝塞爾曲線,quadraticCurveTo(x1, y1,ex,ey ) 二次貝塞爾曲線 x1,y1 控制點(diǎn) ex,ey 結(jié)束點(diǎn) 2. bezierCurveTo(x1, y1, x2, y2, ex, ey) 三次貝塞爾曲線 x1,y1，x2,y2 控制點(diǎn) ex,ey 結(jié)束點(diǎn),坐標(biāo)軸轉(zhuǎn)換,1. translate(dx, dy) 重新映射畫布上的 (0,0) 位置 2. scale(sx, sy) 縮放當(dāng)前繪圖 3. rotate(Math.PI) 旋轉(zhuǎn)當(dāng)前的繪圖 4. save() restore() 保存

6、當(dāng)前圖像狀態(tài)的一份拷貝(保存畫布狀態(tài)） 從棧中彈出存儲(chǔ)的圖形狀態(tài)并恢復(fù) 5. setTransform(a, b, c, d, e, f) 先重置再變換 參數(shù)：水平縮放、水平傾斜、垂直傾斜、垂直縮放、水平移動(dòng)、垂直移動(dòng) 6. transform(a, b, c, d, e, f) 在之前的基礎(chǔ)上變換,填充圖案,createPattern(image,repeat|repeat-x|repeat-y|no-repeat) img元素（Image對(duì)象），canvas元素，video元素(有圖形的),漸變,createLinearGradient(x1, y1, x2, y2); 線性漸變 必須在填

7、充漸變的區(qū)域定義漸變, 否則 沒(méi)有效果 createRadialGradient(x1, y1, r1, x2, y2, r2); 徑向漸變 bg.addColorStop(p, color);,第一節(jié),練習(xí),陰影,ctx.shadowColor ctx.shadowOffsetX ctx.shadowOffsetY ctx.shadowBlur 注：這里的陰影偏移量不受坐標(biāo)系變換的影響,文本,1. fillText() 2. strokeText() 3. measureText(hello world) 了解,線段樣式,lineCap lineJoin,ctx.miterLimit; 當(dāng)l

8、ineJoin是miter時(shí)，用于控制斜接部分的長(zhǎng)度 如果斜接長(zhǎng)度超過(guò) miterLimit 的值，變成bevel 注:實(shí)際運(yùn)算是大于limit*lineWidth/2的值，解就好,斜接長(zhǎng)度,裁剪,ctx.clip()；當(dāng)前路徑外的區(qū)域不再繪制 注：可在clip() 前用 save() 方法保存，后續(xù)通過(guò) restore() 方法恢復(fù),合成,1. ctx.globalCompositeOperation = source-over ; 新像素和原像素的合并方式 2. 11種值 默認(rèn) source-over w3c標(biāo)準(zhǔn) 3. 常用 source-over, destination-over, c

9、opy,全局透明度,ctx.globalAlpha = 0.5;,繪制圖片,1. ctx.drawImage(); 第一個(gè)參數(shù)是img(Image,canvas) 注：onload 2. 3個(gè)參數(shù) (x, y) 起始點(diǎn)坐標(biāo) 3. 5個(gè)參數(shù) (x, y, dx, dx) 起始點(diǎn)坐標(biāo)及圖片所存區(qū)域的寬高 4. 9個(gè)參數(shù) (x1, y1, dx1, dy1, x2, y2, w2, h2) 前四個(gè)為所繪制目標(biāo)元素的起始點(diǎn)和寬高； 后四個(gè)為canvas繪制的起始點(diǎn)和大小；,將canvas內(nèi)容導(dǎo)出,canvas.toDataURL() ; 是canvas自身的方法不是(ctx)上下文對(duì)象 2. 將can

10、vas的內(nèi)容抽取成張圖片, base64編碼格式 注：同源策略的限制（開(kāi)啟服務(wù)器） 3. 將canvas的內(nèi)容放入img元素里,獲取canvas像素信息,ctx.getImageData(x, y, dx, dy) / 同源策略 ctx.createImageData(w, h) 創(chuàng)建新的空白 ImageData 對(duì)象 /一般不用 ctx.putImageData(imgData, x, y) 將圖像數(shù)據(jù)放回畫布上,4 rgba,RGBA 值,R - 紅色 (0-255) G - 綠色 (0-255) B - 藍(lán)色 (0-255) A - alpha 通道 (0-255; 0 是透明的，255 是完全可見(jiàn)的),練習(xí),通過(guò)對(duì)canvas的像素操作將一黑色矩形變成灰色 注：css filter,答案,命中檢測(cè)（檢測(cè)點(diǎn)是否在路徑內(nèi)）,ctx.isPointInPath(x, y)；檢測(cè)是否在區(qū)域內(nèi),chrome 與其他的區(qū)別 如果當(dāng)前路徑不是閉合路徑谷歌瀏覽器會(huì)返回false ctx.isPointInStroke(x, y)；檢測(cè)是否在線上 還可以通過(guò)檢測(cè)當(dāng)前點(diǎn)的像