MDN Canvas教程
API Canvas?Rendering?Context2D即canvas.getContext('2d')返回的對象類型，幾乎所有作圖操作基于這個“上下文對象”而非canvas dom，下文以context2D作簡稱
只有矩形、文本、圖片是可直接繪制顯示的
fillRect(x, y, width, height)
繪制一個填充的矩形
strokeRect(x, y, width, height)
繪制一個矩形的邊框
clearRect(x, y, width, height)
清除指定矩形區域，讓清除部分完全透明。
fillText(text, x, y [, maxWidth])
在(x,y)位置繪制（填充）文本。
strokeText(text, x, y [, maxWidth])
在(x,y)位置繪制（描邊）文本。
drawImage(image, dx, dy [, dWidth, dHeight])
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
在(x,y)位置繪制圖像。
其他均需要路徑
beginPath()
新建一條路徑
closePath()
閉合路徑（即路徑沒有閉合時，從當前點生成一條直線路徑連到起始點，使其閉合）
stroke()
繪制路徑(即描邊)
fill()
(根據設置)填充路徑內部
路徑
context2D路徑方法(省略參數)：
moveTo()
將一個新的子路徑的起始點移動到(x，y)坐標。
lineTo()
使用直線連接子路徑的終點到 x, y 坐標。
quadraticCurveTo()
添加一條二次貝賽爾曲線到當前路徑。
bezierCurveTo()
添加一條三次貝賽爾曲線到當前路徑。
arc()
添加一條圓弧路徑。
arcTo()
根據控制點和半徑添加一條圓弧路徑(同時使用直線連接前一個點，原因下面解釋)
ellipse()
添加一條橢圓路徑。
rect()
創建一條矩形路徑，矩形的起點位置是 (x, y) ，尺寸為 width 和 height。
額外：
Path2D：直接的路徑對象，其具有的方法context2D均有。可作stroke()和fill()的參數而被繪制。意義在于分離出“路徑”，從而在多個canvas上重復繪制，更加靈活。
同時可以使用SVG path data來初始化，如new Path2D("M10 10 h 80 v 80 h -80 Z");
樣式、變形等
1.顏色、線段粗細、字體、全局透明度等，直接操作context2D的屬性。
最常用是fill?Style和strokeStyle。可以對其直接賦值#000、rgba(0,0,0,0)等顏色，也可賦值為createLinearGradient(x1, y1, x2, y2)、createRadialGradient(x1, y1, r1, x2, y2, r2)等對象創建的“漸變對象”。
2.變形、虛線距離等，通過context2D的方法操作
虛線：setLineDash(segments)。segments是一個Array數組，描述交替繪制線段和間距長度的數字。 如果數組元素的數量是奇數， 數組的元素會被復制并重復。例如， [5, 15, 25] 會變成 [5, 15, 25, 5, 15, 25]。取消虛線可直接設為空數組[]
變形：類似于css的transform屬性的各個可用函數。如translate()、rotate()、scale()
重要：
復雜作圖時，經常需要變換原點進行旋轉、繪圖，或切換顏色、線寬，此時可用save()、restore()方法以“棧”結構保存若干設置。
額外
1.當前路徑為空，即調用beginPath()之后，或者canvas剛建的時候，第一條路徑構造命令通常被視為是moveTo()，無論實際上是什么。如：
lineTo(10,10);被視為moveTo(10,10);；
arc(0,0,50,0,Math.PI*2);被視為moveTo(0,50);arc(0,0,50,0,Math.PI*2);，即作圓時第一個下筆的點被作為moveTo的點，然后繼續作圓
2.所有沒有moveTo的跳躍性路徑操作，被視為直線路徑連接，如：
moveTo(100,100);arc(0,0,50,0,Math.PI*2);繪制后將發現有一條直線從(100,100)連到(0,50)，即從當前點連線到作圓時第一個下筆的點。為了避免這種情況，最簡單的方法就是重新beginPath()新開一條路徑
3.isPointInPath()、isPointInStroke()：前者判斷某點是否在閉合路徑內部，后者判斷是否在“邊”上。
關于如何判斷內部，有：
(1)"evenodd": 奇偶環繞規則
以該點為端點，作一條足夠長的射線，方向任意。如果與路徑(邊)相交次數為奇數，則在內部；偶數則在外部。
(2)"nonzero": 非零環繞規則(默認值)
以該點為端點，作一條足夠長的射線，方向任意。以該射線為主視角，起始值為0，如果某條路徑從左往右穿過，則+1；從右往左穿過，則-1；計算最終的值，如果非0，則在內部；如果為0，則在外部。
注意：我們無需確保每個方向的射線的最終值都一樣。即可能90°算到是1，而180°算到是-1，最終他們都是“非0”，結果是一致的。
