1.路徑容器
            每次調(diào)用路徑api時,都會往路徑容器里做登記
            調(diào)用beginPath時,清空整個路徑容器
        2.樣式容器
            每次調(diào)用樣式api時,都會往樣式容器里做登記
            調(diào)用save時候,將樣式容器里的狀態(tài)壓入樣式棧
            調(diào)用restore時候,將樣式棧的棧頂狀態(tài)彈出到樣式容器里,進(jìn)行覆蓋
        3.樣式棧
            調(diào)用save時候,將樣式容器里的狀態(tài)壓入樣式棧
            調(diào)用restore時候,將樣式棧的棧頂狀態(tài)彈出到樣式樣式容器里,進(jìn)行覆蓋

阻止IE6下的默認(rèn)行為：

image.png

day09

1.注意點
    ---canvas圖像的渲染有別于html圖像的渲染，
            canvas的渲染極快，不會出現(xiàn)代碼覆蓋后延遲渲染的問題
            寫canvas代碼一定要具有同步思想
    ---在獲取上下文時，一定要先判斷
    ---畫布高寬的問題
        畫布默認(rèn)高寬300*150
        切記一定要使用html的attribute的形式來定義畫布的寬高
        通過css形式定義會縮放畫布內(nèi)的圖像
    ---繪制矩形的問題
        a.邊框?qū)挾鹊膯栴}，邊框?qū)挾仁窃谄屏可舷路謩e渲染一半，可能會出現(xiàn)小數(shù)邊框，
            一旦出現(xiàn)小數(shù)邊框都會向上取整
        b.canvas的api只支持一種圖像的直接渲染：矩形
    ---我們沒法使用選擇器來選到canvas中的圖像
2.畫布api
    oc.getContext("2d");
    oc.width
    oc.height
3.上下文api
    ctx.fillRect(x,y,w,h):填充矩形
    ctx.strokeRect(x,ymwmh):帶邊框的矩形
    ctx.clearRect(0,0,oc.width,oc.height):清除整個畫布
        注意原點的位置
    ctx.fillStyle
    ctx.strokeStyle
    ctx.lineWidth
    ctx.lineCap
    ctx.lineJoin
    ctx.moveTo(x,y):將畫筆抬起點到x，y處
    ctx.lineTo(x,y):將畫筆移到x，y處
    ctx.rect(x,y,w,h)
    ctx.arc(x,y,r,degS,degE,dir)
    ctx.arcTo(x1,y1,x2,y2,r):2個坐標(biāo)，一個半徑
            結(jié)合moveTo(x,y)方法使用，
            x,y:起始點
            x1,y1：控制點
            x2,y2：結(jié)束點
    ctx.quadraticCurveTo(x1,y1,x2,y2)
            結(jié)合moveTo(x,y)方法使用，
            x,y:起始點
            x1,y1：控制點
            x2,y2：結(jié)束點
            必須經(jīng)過起點和終點
    ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
            結(jié)合moveTo(x,y)方法使用，
            x,y:起始點
            x1,y1：控制點
            x2,y2：控制點
            x3，y3：結(jié)束點
            必須經(jīng)過起點和終點
    ctx.fill()
    ctx.stroke()
    
    ctx.beginpath():清除路徑容器
    ctx.closepath():閉合路徑
        fill自動閉合
        stroke需要手動閉合
    ctx.save()
        將畫布當(dāng)前狀態(tài)(樣式相關(guān) 變換相關(guān))壓入到樣式棧中
    ctx.restore()
        將樣式棧中棧頂?shù)脑貜椀綐邮饺萜髦?        圖像最終渲染依賴于樣式容器
        
    ctx.translate(x,y):將原點按當(dāng)前坐標(biāo)軸位移x，y個單位
    ctx.rotate(弧度):將坐標(biāo)軸按順時針方向進(jìn)行旋轉(zhuǎn)
    ctx.scale(因子):
        放大：放大畫布，畫布中的一個css像素所占據(jù)的物理面積變大，畫布中包含的css像素的個數(shù)變少
                畫布中圖像所包含的css像素的個數(shù)不變
        縮小：縮小畫布，畫布中的一個css像素所占據(jù)的物理面積變小，畫布中包含的css像素的個數(shù)變多
                畫布中圖像所包含的css像素的個數(shù)不變