圖形屬性：fillStyle：填充顏色。font：繪製文本的時候css字體globalAlpha：繪製像素時添加的透明度gloablCompositeOperation：合併新的像素點和下面的像素點lineCap：渲染線段的末端lineJoin：渲染頂點lineWidth：邊框的寬度miterLimit：斜接頂點的最大長度textAlign：文本水平對齊方式textBaseline：文本垂直對齊方式shadowBlur：陰影清晰度或模糊程度shadowColor：下拉陰影的顏色shadowOffsetX：陰影的水平偏移量shadowOffsetY：陰影垂直偏移量strokeStyle：邊框線顏色圖形方法：fillRect()： x坐標 y坐標 寬度 高度 （繪製矩形）arc()： x坐標 y坐標 r半徑 起始角 結束角 設置順時針(false)還是逆時針(true)（圓形）fill()：填充路徑fillRect()： x y 寬度 高度beginPath()：新路徑moveTo()：新的子路徑 有x，y軸clineTo()：該點與新點通過直線連接 有x，y軸stroke()：繪製邊框線arcTo()：繪製一條直線與一段圓弧 弧的起始坐標x 弧的起點坐標y 弧的結束坐標x 弧的結束坐標y 弧的半徑rbezierCurveTo()：當前子路徑添加一個新點，利用三次貝塞爾曲線相連。quadrticCurveTo()：與上面類似，只不過它使用二次貝塞爾曲線。closePath()：邊框線閉合clearRect()：與fillRect()類似 不過它會忽略當前填充樣式，採用透明的黑色像素rect()：用於繪製矩形，會對當前路徑產生影響，它會將指定的矩形添加到當前路徑的子路徑中。createPattern()：第一參數指定了用做圖案的圖片，必須是文檔中的一個img、canvas或video元素。第二參數通常是repeat，表示採用重複的圖片填充。還可以使用repeat-x、repeat-y、no-repeat。createRadialGradient()：用來創建放射狀、圓形漸變對象。參數為：漸變開始圓的x坐標、y坐標、半徑、結束x坐標、結束y坐標、結束半徑rcreateLinearGradient()：用來創建線性漸變。參數為：漸變開始的x坐標，y坐標，結束x左邊，結束y坐標addColorStop()：定義漸變的顏色。參數：介於 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置。二參數是css顏色fillText()：用於給畫布添加文本。參數：text、文本x坐標、y、允許文本最大寬度strokeText()：也是添加文本，不過無填充。參數：同上。clip()：定義一個裁剪區域，定義了之後，該區域不會繪製任何內容。save()：此方法將當前狀態推送到堆棧上。restore()：此方法彈出堆棧上的頂級狀態，將上下文恢復到該狀態。setTransform()：直接設置畫布的變換矩陣。參數：水平旋轉、水平傾斜、垂直傾斜、垂直縮放、水平移動，垂直移動。translate()：將坐標原點進行上下左右移動。參數：添加到水平坐標x上的值，添加到垂直坐標y上的值scale()：實現對x、y軸上的距離進行延長和縮短。參數：縮放當前繪圖的寬度(1=100%,0.5=50%…)、也是縮放的高度drawImage()：用於將源圖片的像素內容複製到畫布上，還可以對圖片進行縮放旋轉。參數：規定的(圖片，畫布，視頻)、開始剪切的x坐標、y坐標、被剪切的寬度、高度、在畫布上放置圖形的x坐標、y坐標、要使用圖像的寬度、高度。toDataURL()：方法將畫布中內容抽取成一張圖片，PNG圖片形式返回。同時編碼成一個字符串數據，可以在img上使用。getImageData()：複製畫布上執行矩形的像素數據。參數：開始複製的x坐標，y坐標、複製矩形區域的寬度、高度。putImageData()：拿到複製的像素，且將數據放回畫布。參數：要回放的數據、畫布的x坐標，y坐標、水平值x，水平值y、在畫布上繪製圖像所使用的寬度、高度。// 檢測isPointInPath()：指定的點是否在當前路徑中，返回true表示在當前路徑，反之false。
使用：注意繪製的順序，否則不會生效。畫布的默認坐標系統是以畫布最左上角為原點。
繪製線段、填充多變形
封裝一個API來繪製圖形