1. canvas（畫布）

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

默認(rèn)寬高為300px*150px

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

2.渲染上下文

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

<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個坐標(biāo)，一個半徑
            結(jié)合moveTo(x,y)方法使用，
            x,y:起始點
            x1,y1：控制點
            x2,y2：結(jié)束點
    ctx.quadraticCurveTo(x1,y1,x2,y2)        創(chuàng)建二次貝塞爾曲線
            結(jié)合moveTo(x,y)方法使用，
            x,y:起始點
            x1,y1：控制點
            x2,y2：結(jié)束點
            必須經(jīng)過起點和終點
    ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)        創(chuàng)建三次方貝塞爾曲線
            結(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ù)不變
        縮?。嚎s小畫布，畫布中的一個css像素所占據(jù)的物理面積變小，畫布中包含的css像素的個數(shù)變多
                畫布中圖像所包含的css像素的個數(shù)不變