1. review
obj.hasOwnProperty(name)? 判斷屬性name是否obj對象的自身屬性
for...in 遍歷對象/數(shù)組
o1 instanceof Object 判斷實例對象o1是否為Object所創(chuàng)建的實例
jquery 仿寫
2. canvas 畫布，新標簽篓足，IE9以下不支持 访递，命令式編程
svg 矢量 脸甘，聲明式編程[html/css]
默認寬高 300 * 150析苫，不要在樣式里設(shè)置寬高翔烁，在canvas元素屬性里設(shè)置
提供了一套javascript繪制圖形的接口伦腐，讓瀏覽器原生支持繪圖
繪制的是位圖/柵格圖像
a.繪制圖形【點線面...】
b.處理圖像【圖片灾搏、視頻處理】
c.動畫/游戲
3. canvas坐標系，默認左上角為原點殴蓬，向右為x軸正方向匿级，向下為y軸正方向
4. 矩形蟋滴，只提供了三個直接繪制圖形的方法
ctx.fillRect(x, y, w, h);? 填充 繪制以點(x,y)為左上角，寬為w痘绎，高為h的矩形
ctx.strokeRect(x, y, w, h) 描邊
ctx.clearRect(x, y, w, h)? 擦除
其他圖形的繪制都必須經(jīng)過以下四個步驟：
a.開始一個路徑 ctx.beginPath()
b.使用繪圖命令
c.結(jié)束閉合路徑 ctx.closePath()
d.填充/描邊
5. 繪制1px線津函，canvas是柵格化圖像，至少占據(jù)一個格子孤页，繪制線的起點+0.5即可
6. ctx.fillStyle 填充樣式
ctx.strokeStyle 描邊樣式
7. 繪圖路徑path命令
ctx.arc(x, y, radius, beginAngle, endAngle, clockwise)
beginAngle 開始的弧度
endAngle? 結(jié)束的弧度
clockwise? 是否逆時針方向
ctx.lineTo(x,y)
ctx.moveTo(x,y)
8. 文本居中
第一種方式
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillRect("html5", canvas.width/2, canvas.height/2)
第二種方式
var text = "I'm learning canvas";
var tm = ctx.measureText(text);
ctx.textBaseline = "middle";
ctx.fillText(text, (canvas.width - tm.width)/2 , canvas.height/2)
///////////////////////////////////////////第二天
1.canvas動畫
requestAnimationFrame,為動畫設(shè)計的接口,相比計時器制作的要流暢,占用資源少
var id = requestAnimationFrame(fn)
cancelAnimationFrame(id)
2.canvas動畫跟DOM動畫比較
canvas性能好,繪制之前要先擦除畫布
DOM動畫比較消耗性能,也不夠流暢
3.擦除畫布的方法
ctx.clearRect(0,0,canvas.width,canvas.height)
canvas元素的寬度變化會擦除畫布所有內(nèi)容
canvas.width = canvas.width
canvas.height = canvas.height
4. e.offsetX/e.offsetY 相對綁定元素的坐標
e.clientX/e.clientY 是相對于canvas畫布的
刮刮樂效果,原理擦除鼠標在canvas中的坐標中的內(nèi)容
a.添加事件touchmove/mousemove
b.找到鼠標相對canvas的zuob
c.ctx.clearRect(x,y,10,10)
5. ctx.isPointInPath(x,y) 判斷點(x,y)是否在路徑里,返回布爾值
以下三個方法不會產(chǎn)生路徑
ctx.fillRect();
ctx.strokeRect();
ctx.closeRect();
