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)
清除指定矩形區(qū)域赎败，讓清除部分完全透明秕衙。
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()
閉合路徑（即路徑?jīng)]有閉合時，從當(dāng)前點生成一條直線路徑連到起始點妓笙，使其閉合）
stroke()
繪制路徑(即描邊)
fill()
(根據(jù)設(shè)置)填充路徑內(nèi)部
路徑
context2D路徑方法(省略參數(shù))：
moveTo()
將一個新的子路徑的起始點移動到(x若河，y)坐標(biāo)。
lineTo()
使用直線連接子路徑的終點到 x, y 坐標(biāo)寞宫。
quadraticCurveTo()
添加一條二次貝賽爾曲線到當(dāng)前路徑萧福。
bezierCurveTo()
添加一條三次貝賽爾曲線到當(dāng)前路徑。
arc()
添加一條圓弧路徑辈赋。
arcTo()
根據(jù)控制點和半徑添加一條圓弧路徑(同時使用直線連接前一個點鲫忍，原因下面解釋)
ellipse()
添加一條橢圓路徑。
rect()
創(chuàng)建一條矩形路徑钥屈，矩形的起點位置是 (x, y) 悟民，尺寸為 width 和 height。
額外：
Path2D：直接的路徑對象篷就，其具有的方法context2D均有射亏。可作stroke()和fill()的參數(shù)而被繪制。意義在于分離出“路徑”智润，從而在多個canvas上重復(fù)繪制及舍，更加靈活。
同時可以使用SVG path data來初始化窟绷，如new Path2D("M10 10 h 80 v 80 h -80 Z");
樣式锯玛、變形等
1.顏色、線段粗細(xì)兼蜈、字體攘残、全局透明度等，直接操作context2D的屬性为狸。
最常用是fill?Style和strokeStyle肯腕。可以對其直接賦值#000钥平、rgba(0,0,0,0)等顏色实撒，也可賦值為createLinearGradient(x1, y1, x2, y2)、createRadialGradient(x1, y1, r1, x2, y2, r2)等對象創(chuàng)建的“漸變對象”涉瘾。
2.變形知态、虛線距離等，通過context2D的方法操作
虛線：setLineDash(segments)立叛。segments是一個Array數(shù)組负敏，描述交替繪制線段和間距長度的數(shù)字。 如果數(shù)組元素的數(shù)量是奇數(shù)秘蛇， 數(shù)組的元素會被復(fù)制并重復(fù)其做。例如， [5, 15, 25] 會變成 [5, 15, 25, 5, 15, 25]赁还。取消虛線可直接設(shè)為空數(shù)組[]
變形：類似于css的transform屬性的各個可用函數(shù)妖泄。如translate()、rotate()艘策、scale()
重要：
復(fù)雜作圖時蹈胡，經(jīng)常需要變換原點進(jìn)行旋轉(zhuǎn)、繪圖朋蔫，或切換顏色罚渐、線寬，此時可用save()驯妄、restore()方法以“椇刹ⅲ”結(jié)構(gòu)保存若干設(shè)置。
額外
1.當(dāng)前路徑為空青扔，即調(diào)用beginPath()之后源织，或者canvas剛建的時候翩伪，第一條路徑構(gòu)造命令通常被視為是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的點黎茎，然后繼續(xù)作圓
2.所有沒有moveTo的跳躍性路徑操作，被視為直線路徑連接当悔，如：
moveTo(100,100);arc(0,0,50,0,Math.PI*2);繪制后將發(fā)現(xiàn)有一條直線從(100,100)連到(0,50)傅瞻，即從當(dāng)前點連線到作圓時第一個下筆的點。為了避免這種情況盲憎，最簡單的方法就是重新beginPath()新開一條路徑
3.isPointInPath()嗅骄、isPointInStroke()：前者判斷某點是否在閉合路徑內(nèi)部，后者判斷是否在“邊”上饼疙。
關(guān)于如何判斷內(nèi)部溺森，有：
(1)"evenodd": 奇偶環(huán)繞規(guī)則
以該點為端點，作一條足夠長的射線窑眯，方向任意屏积。如果與路徑(邊)相交次數(shù)為奇數(shù)，則在內(nèi)部磅甩；偶數(shù)則在外部炊林。
(2)"nonzero": 非零環(huán)繞規(guī)則(默認(rèn)值)
以該點為端點，作一條足夠長的射線卷要，方向任意渣聚。以該射線為主視角，起始值為0僧叉，如果某條路徑從左往右穿過奕枝，則+1；從右往左穿過瓶堕，則-1倍权；計算最終的值，如果非0捞烟，則在內(nèi)部薄声；如果為0，則在外部题画。
注意：我們無需確保每個方向的射線的最終值都一樣默辨。即可能90°算到是1，而180°算到是-1苍息，最終他們都是“非0”缩幸，結(jié)果是一致的壹置。
