js-canvas（基本用法）

###1. canvas（畫布）

　　<canvas>是HTML 5 新增的元素，可用於通過使用JavaScript中的腳本來繪制圖形

　　　　默認寬高為300px*150px

　　基本概念和方法入門推薦： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

###2.渲染上下文

　　<canvas>元素只是創造了一個固定大小的畫布，要想在它上面繪制內容，我們需要找到它的渲染上下文

　　　　<canvas>元素有一個getContex（）方法，這個方法是用來獲取渲染上下文和它的繪畫功能

　　　　

　　基本用法：

　　　　　　<canvas id="cav" width="300px" height="150px"></canvas>

　　　　　　var canvas = document.querySelector("#cav")

　　　　　　if(canvas.getContext){    //  必須判斷是否存在該方法，即判斷瀏覽器是否支持canvas

　　　　　　　　var ctx = canvas.getContext("2d");

　　　　　　}

 

 ###3. .畫布api
        oc.getContext("2d");
        oc.width
        oc.height
 ###4.上下文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個坐標，一個半徑
                結合moveTo(x,y)方法使用，
                x,y:起始點
                x1,y1：控制點
                x2,y2：結束點
        ctx.quadraticCurveTo(x1,y1,x2,y2)        創建二次貝塞爾曲線
                結合moveTo(x,y)方法使用，
                x,y:起始點
                x1,y1：控制點
                x2,y2：結束點
                必須經過起點和終點
        ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)        創建三次方貝塞爾曲線
                結合moveTo(x,y)方法使用，
                x,y:起始點
                x1,y1：控制點
                x2,y2：控制點
                x3，y3：結束點
                必須經過起點和終點
        ctx.fill()
        ctx.stroke()
        
        ctx.beginpath():清除路徑容器
        ctx.closepath():閉合路徑
            fill自動閉合
            stroke需要手動閉合
        ctx.save()
            將畫布當前狀態(樣式相關 變換相關)壓入到樣式棧中
        ctx.restore()
            將樣式棧中棧頂的元素彈到樣式容器中
            圖像最終渲染依賴於樣式容器
            
        ctx.translate(x,y):將原點按當前坐標軸位移x，y個單位
        ctx.rotate(弧度):將坐標軸按順時針方向進行旋轉
        ctx.scale(因子):
            放大：放大畫布，畫布中的一個css像素所占據的物理面積變大，畫布中包含的css像素的個數變少
                    畫布中圖像所包含的css像素的個數不變
            縮小：縮小畫布，畫布中的一個css像素所占據的物理面積變小，畫布中包含的css像素的個數變多
                    畫布中圖像所包含的css像素的個數不變

附加： canvas作品資源  https://www.html5tricks.com/tag/html5-canvas/