基於：
var canvas = document.getElementById('id');
var ctx = canvas.getContext('2d');
1.樣式：
ctx.fillStyle = 'color'-填充色
ctx.strokeStyle = 'color'-線色
ctx.lineWidth = 'length'-線寬
lineCap = type-設置線條末端的外觀。
lineJoin = type-設置線條相交的“角落”的外觀。
miterLimit = value-當兩條線以銳角連接時，建立一個斜接限制，以控制結的厚度。
getLineDash()-返回包含偶數個非負數的當前行虛線模式數組。
setLineDash(segments)-設置當前行虛線模式。
lineDashOffset = value-指定在一行上啟動破折號數組的位置。
2.畫矩形：
ctx.fillRect(x, y, width, height)-填充矩形
ctx.strokeRect(x, y, width, height)-非填充矩形，只有邊框
ctx.clearRect(x, y, width, height)-清除范圍
3.畫路徑
ctx.beginPath()-開始畫
ctx.moveTo(x,y)-算是定義起點吧
ctx.lineTo(x,y)-連線到某點
ctx.fill()-會自動閉合
ctx.stroke()-不會閉合
ctx.closePath()-關閉繪畫
4.畫圓
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)-radius代表半徑，anticlockwise代表順時針，逆時針(boolean)
5.曲線
quadraticCurveTo(cp1x, cp1y, x, y)-xy偏離一致的曲線
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)-想怎么偏怎么偏
6.new Path2D():創建一個2d路徑對象，對此對象進行操作，最后成為stroke()或fill()的參數。
7.漸變
createLinearGradient(x1, y1, x2, y2)
createRadialGradient(x1, y1, r1, x2, y2, r2)
gradient.addColorStop(position, color)（0~1，color）
8.模式
createPattern(image, type)-創建並返回一個新的畫布模式對象
image是一個CanvasImageSource,type是一個表示如何使用圖像的字符串(如平鋪)
9.陰影
shadowOffsetX = float
指示陰影應從對象延伸的水平距離。該值不受變換矩陣的影響。默認值為0。
shadowOffsetY = float
指示陰影應從對象延伸的垂直距離。該值不受變換矩陣的影響。默認值為0。
shadowBlur = float
表示模糊效果的大小; 該值不對應於多個像素，並且不受當前變換矩陣的影響。默認值為0。
shadowColor = color
標准CSS顏色值，表示陰影效果的顏色; 默認情況下，它是完全透明的黑色。
10.繪文字
fillText(text, x, y [, maxWidth])
在給定（x，y）位置填充給定文本。可選擇繪制最大寬度。
strokeText(text, x, y [, maxWidth])
在給定（x，y）位置描邊給定文本。可選擇繪制最大寬度。
font = value
繪制文本時使用的當前文本樣式。此字符串使用與CSS font屬性相同的語法。默認字體是10px sans-serif。
textAlign = value
文本對齊設置。可能的值：start，end，left，right或center。默認值為start。
textBaseline = value
基線對齊設置。可能的值：top，hanging，middle，alphabetic，ideographic，bottom。默認值為alphabetic。
direction = value
方向性。可能的值：ltr，rtl，inherit。默認值為inherit。
measureText()
返回一個TextMetrics對象，該對象包含以當前文本樣式繪制時指定文本的寬度
11.圖像
drawImage(image, x, y,width,height)
繪制坐標（x，y）處CanvasImageSource的image參數指定的值。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)-切片
給定一個image，該功能只通過其左上角是矩形指定的源圖像的區域（sx，sy其寬度和高度是），並sWidth與sHeight和它繪制到畫布，
在將其放置在畫布上（dx，dy）和縮放它由指定的大小dWidth和dHeight。
12.保存和恢復狀態
save()
保存畫布的整個狀態。
restore()
恢復最近保存的畫布狀態。
畫布狀態存儲在堆棧中。每次save()調用該方法時，當前繪圖狀態都會被壓入堆棧。
您可以save()根據需要多次調用該方法。每次restore()調用該方法時，最后保存的狀態將從堆棧中彈出，並恢復所有保存的設置。
13.動畫
translate(x, y)
rotate(angle)
scale(x, y)
transform(a, b, c, d, e, f)//矩陣
setTransform(a, b, c, d, e, f)
將當前變換重置為單位矩陣，然后transform()使用相同的參數調用該方法。這基本上撤消了當前的轉換，然后在一個步驟中設置指定的轉換。
resetTransform()
將當前變換重置為單位矩陣。
使用動畫，使用window.requestAnimationFrame()而不是window.setInterval()
window.cancelAnimationFrame();取消幀動畫
14.合成
globalCompositeOperation = type
這將設置在繪制新形狀時應用的合成操作的類型，其中type是一個字符串，用於標識要使用的十二個合成操作中的哪一個。
15.clip()剪切路徑
16.獲取上下文的像素數據
ctx.getImageData(left, top, width, height);
此方法返回一個ImageData對象，該對象表示畫布區域的像素數據，其角點由點（left，top），（left+width，top），（left，top+height）和（left+width，top+height）表示。坐標以畫布坐標空間單位指定。
17.將像素數據繪制到上下文中
ctx.putImageData(myImageData, dx, dy);
該dx和dy參數顯示在其中進行繪制要繪制的像素數據的左上角的范圍內的設備坐標。
18.保存圖像
canvas.toDataURL('image/png')
默認設置。創建PNG圖像。
canvas.toDataURL('image/jpeg', quality)
創建JPG圖像。或者，您可以提供0到1范圍內的質量，其中一個是最好的質量，0幾乎不可識別但文件大小很小。
canvas.toBlob(callback, type, encoderOptions)
創建Blob表示畫布中包含的圖像的對象。
19.命中區域
CanvasRenderingContext2D.addHitRegion()
在畫布中添加命中區域。
CanvasRenderingContext2D.removeHitRegion()
使用id畫布中指定的內容刪除命中區域。
CanvasRenderingContext2D.clearHitRegions()
從畫布中刪除所有命中區域。
檢查MouseEvent.region屬性以測試鼠標是否正在擊中您的區域
20.聚焦環
CanvasRenderingContext2D.drawFocusIfNeeded()
如果給定元素被聚焦，則此方法圍繞當前路徑繪制聚焦環。
CanvasRenderingContext2D.scrollPathIntoView()
將當前路徑或給定路徑滾動到視圖中。
21.基於canvas封裝的代碼片段（https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Code_snippets/Canvas）
獲取畫布中某種顏色的像素數
獲取畫布中像素的顏色
鏈接方法
將畫布圖像保存到文件
將遠程頁面加載到畫布元素上
將圖像文件轉換為base64字符串