CanvasAPI參考文檔推薦：
一、CanvasRenderingContext2D 屬性
canvas : 當前元素對象
globalAlpha: 全局透明度，范圍是0到1，范圍以外的值會被忽略
globalCompositeOperation: 可以用來設置Canvas圖形的混合模式。可以衍生很多其他效果，以及改變繪制圖形的上下層疊關系。
fillStyle :
color
使用純色填充，支持RGB，HSL，RGBA，HSLA以及HEX色值。
gradient
使用漸變填充，可以是線性漸變或者徑向漸變。
pattern
使用紋理填充。由於圖片也能作為紋理，因此fillStyle也能填充普通的位圖
文字設置：
font: value就是字號字體值，其規則和CSS的font很類似，除了一些很微小的細節差異，其他幾乎沒什么區別
textAlign：文本水平對齊方式，和CSS的text-align屬性值類似，支持left，right，centerstart，end這些值
textBaseline：指定文本對齊的基線，
其中value支持如下幾個關鍵字：
top
設定的垂直y坐標作為文本em區域（em區域可以看成中文字符占據的區域）的頂部。
hanging
hanging主要在藏文和其他印度文字中使用，我們了解即可。
middle
設定的垂直y坐標作為文本em區域的垂直中心位置。
alphabetic
默認值。表示的是正常文本的基線，可以看成是字母x的下邊緣。也就是設定的垂直y坐標就是字母x的下邊緣。
ideographic
ideographic主要在漢語、日語和韓語中使用。字面直譯是表意基線。含義為：如果字符的主體突出在字母基線之下，則這是字符主體的底部。例如漢字“中”比字母x位置更低，因此，底部是漢字主體的底部。
bottom
設定的垂直y坐標作為文本em區域的底部。
線段相關：
lineCap: 表示線條端點的樣式
butt
默認值，線的端點就像是個斷頭台，例如一條橫線，終點x坐標是100，則這條線的最右側邊緣就是100這個位置，沒有超出。
round
線的端點多出一個圓弧。
square
線的端點多出一個方框，框框的寬度和線一樣寬，高度是線厚度的一半。
lineDashOffset:value 表示虛線起始繪制的偏移距離，為浮點型，默認值是0.0。
lineJoin: 表示線條轉角的樣式，支持：miter，round，bevel
lineWidth:value 表示線的寬度。數值類型，默認值是1.0。如果是負數，0，NaN，或者Infinity都會忽略。
miterLimit：value表示多大范圍內轉角表現為miter的寬度。數值類型，默認值是10.0。如果是負數，0，NaN，或者Infinity都會忽略。
strokeStyle：可以是路徑的描邊，也可以是是形狀的描邊，也可以是文字的描邊。描邊的樣式也不僅限於顏色。
color
描邊設置為顏色。
gradient
描邊設置為漸變。
pattern
描邊設置為圖案。
陰影設置：
shadowBlur：可以用來指定陰影的模糊程度。默認值是0，表示不模糊。
shadowColor：可以用來指定陰影的顏色。默認值是透明黑，也就是看不到顏色，因此，如果我們想要使用陰影效果，shadowColor是必須要指定的。
shadowOffsetX：表示陰影的水平偏移大小。
shadowOffsetY：表示陰影的垂直偏移大小。
二、CanvasRenderingContext2D 方法
1.繪制文字
fileText()
用來填充文字，是Canvas繪制文本的主力方法。
context.fillText(text, x, y [, maxWidth]);
參數
各個參數含義和作用如下：
textString
用來填充的文本信息。
xNumber
填充文本的起點橫坐標。
yNumber
填充文本的起點縱坐標。
maxWidth（可選）Number ,指定最大寬度，每個文本寬度進行適合，而非換行
strokeText()
實現文本描邊效果。此描邊為居中描邊。
context.strokeText(text, x, y [, maxWidth]);
參數同上
measureText()
可以用來測量文本的一些數據，返回 TextMetrics.
context.measureText(text)
返回值：TextMetrics，含有文本的寬度
TextMetrics.width
只讀。表示當前文本占據的CSS像素寬度。
2.繪制區域，繪制路徑
stroke();
context.stroke();
context.stroke(path);
參數
pathObject
指Path2D對象。IE瀏覽器不支持。
屬性關聯：lineWidth,strokeStyle
fill();
context.fill();
context.fill(fillRule);
context.fill(path, fillRule);
參數
各個參數含義和作用如下：
fillRuleString
填充規則。用來確定一個點實在路徑內還是路徑外。可選值包括：
nonzero：非零規則，此乃默認規則。
evenodd：奇偶規則。
pathObject
指Path2D對象。
屬性關聯：fillStyle
繪制路徑：
lineTo（） 、moveTo() 、arcTo() 、quadraticCurveTo()、 bezierCurveTo() 、beginPath()、 closePath()
context.beginPath(); context.moveTo(50, 20); context.lineTo(200, 100); context.stroke();
context.beginPath(); context.moveTo(50, 50); context.bezierCurveTo(100, 100, 200, 40, 250, 100); context.stroke();
// 開始繪制 context.beginPath(); context.moveTo(50, 50); context.quadraticCurveTo(100, 100, 250, 100); context.stroke();
context.arcTo(x1, y1, x2, y2, radius);
context.quadraticCurveTo(cpx, cpy, x, y);
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
strokeRect()
context.strokeRect(x, y, width, height);
rect() 功能同 strokeRect()
arc()
context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
參數
各個參數含義和作用如下：
xNumber
圓弧對應的圓心橫坐標。
yNumber
圓弧對應的圓心縱坐標。
radiusNumber
圓弧的半徑大小。
startAngleNumber
圓弧開始的角度，單位是弧度。
endAngleNumber
圓弧結束的角度，單位是弧度。
anticlockwise（可選）Boolean
弧度的開始到結束的繪制是按照順時針來算，還是按時逆時針來算。如何設置為true，則表示按照逆時針方向從startAngle繪制到endAngle。
ellipse()
context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
參數
各個參數含義和作用如下：
xNumber
橢圓弧對應的圓心橫坐標。
yNumber
橢圓弧對應的圓心縱坐標。
radiusXNumber
橢圓弧的長軸半徑大小。
radiusYNumber
橢圓弧的短軸半徑大小。
rotationNumber
橢圓弧的旋轉角度，單位是弧度。
startAngleNumber
圓弧開始的角度，角度從橫軸開始算，單位是弧度。
endAngleNumber
圓弧結束的角度，單位是弧度。
anticlockwise（可選）Boolean
弧度的開始到結束的繪制是按照順時針來算，還是按時逆時針來算。如何設置為true，則表示按照逆時針方向從startAngle繪制到endAngle。
setLineDash(),getLineDash()
ctx.setLineDash(segments);
參數
segmentsArray
數值列表數組。例如[5, 5]，表示虛線的實線和透明部分長度是5像素和5像素。如果此參數值適合空數組[]，則表示實線，常用來重置虛線設置。
context.getLineDash();
返回值是一個數組，數組里邊的值就是數字，稱為數字列表。所謂虛線，就是一段實線一段空隙交替出現的條線，而這里的數字列表中的值標識的就是交替實線和間歇的長度值。如果設置虛線的時候的數字是個奇數，則數組里邊的數字就會被復制和鏈接，這樣數量就變成偶數。
isPointInPath() ,isPointInStroke()
context.isPointInPath(x, y);
context.isPointInPath(x, y, fillRule);
// 下面語法IE不支持
context.isPointInPath(path, x, y);
context.isPointInPath(path, x, y, fillRule);
檢測點，是否在路徑上。
參數
此方法返回Boolean值。 參數 各個參數含義和作用如下： xNumber 用來檢測的點的橫坐標。 yNumber 用來檢測的點的縱坐標。 fillRuleString 填充規則。用來確定一個點實在路徑內還是路徑外。可選值包括： nonzero：非零規則，此乃默認規則。 evenodd：奇偶規則。 關於'nonzero'和'evenodd'規則可參見這篇文章。 pathObject 指Path2D對象。 // 登錄狀態下不會出現這行文字，點擊頁面右上角一鍵登錄
context.isPointInStroke(x, y); context.isPointInStroke(path, x, y); // 檢測點是否在描邊路徑上，描邊越粗，則檢測區域越大。
此方法返回Boolean值。 參數 各個參數含義和作用如下： xNumber 用來檢測的點的橫坐標。 yNumber 用來檢測的點的縱坐標。 pathObject 指Path2D對象。 // 登錄狀態下不會出現這行文字，點擊頁面右上角一鍵登錄
繪制區域：
fillRect()
context.fillRect(x, y, width, height);
3.繪制圖片
ImageData 像素信息數據 ，可以通過getImageData(),createImageData() 獲得
ImageData有如下符合規范標准的屬性。
ImageData.data
只讀。是一個包含RGBA像素信息的Uint8ClampedArray，數組中所有的值都是整數，范圍是0~255。
詳細 »
ImageData.height
只讀。是無符號長整數，表示ImageData對應的實際像素高度。
詳細 »
ImageData.width
只讀。是無符號長整數，表示ImageData對應的實際像素寬度。
createImageData()
context.createImageData(width, height);
context.createImageData(imagedata);
返回值是ImageData對象，包含width，height和data這3個只讀屬性。參數具體含義如下：
widthNumber
ImageData對象包含的width值。如果ImageData對象轉換成圖像，則此width也是最終圖像呈現的寬度。
heightNumber
ImageData對象包含的height值。如果ImageData對象轉換成圖像，則此height也是最終圖像呈現的高度。
imagedataObject
一個存在的ImageData對象，只會使用該ImageData對象中的width和height值，包含的像素信息會全部轉換為透明黑。
getImageData()
context.getImageData(sx, sy, sWidth, sHeight);
putImageData()
context.putImageData(imagedata, dx, dy);
context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
參數
各個參數含義和作用如下：
imagedataObject
包含圖像像素信息的ImageData對象。
dxNumber
目標Canvas中被圖像數據替換的起點橫坐標。
dyNumber
目標Canvas中被圖像數據替換的起點縱坐標。
dirtyX（可選）Number
圖像數據渲染區域的左上角橫坐標。默認值是0。
dirtyY（可選）Number
圖像數據渲染區域的左上角縱坐標。默認值是0。
dirtyWidth（可選）Number
圖像數據渲染區域的寬度。默認值是imagedata圖像的寬度。
dirtyHeight（可選）Number
圖像數據渲染區域的高度。默認值是imagedata圖像的高度。
關於參數，有必要再詳細解釋下。雖然看上去有9大參數，但不用慌，實際上可以就3類參數：
第1類就是imagedata，就是用來替換當前已有的Canvas畫布上的ImageData數據對象。
第2類就是dx，dy，這兩個參數是作用在Canvas畫布上的。imagedata你可以看成是一個即將貼在Canvas畫布上“圖片膏葯”，究竟貼在什么位置呢？dx，dy參數就是告訴這個膏葯，你的左上角位置就是這里。
需要注意的是，其坐標系並沒有發生任何變化。從效果表現上看，可以看成是臟矩形外面的像素被當做透明像素處理了。
drawImage()
context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
參數 各個參數含義和作用如下： imageObject 繪制在Canvas上的元素，可以是各類Canvas圖片資源（見CanvasImageSource），如<img>圖片，SVG圖像，Canvas元素本身等。 dxNumber 在Canvas畫布上規划一片區域用來放置圖片，dx就是這片區域的左上角橫坐標。 dyNumber 在Canvas畫布上規划一片區域用來放置圖片，dy就是這片區域的左上角縱坐標。 dWidthNumber 在Canvas畫布上規划一片區域用來放置圖片，dWidth就是這片區域的寬度。 dHeightNumber 在Canvas畫布上規划一片區域用來放置圖片，dHeight就是這片區域的高度。 sxNumber 表示圖片元素繪制在Canvas畫布上起始橫坐標。 syNumber 表示圖片元素繪制在Canvas畫布上起始縱坐標。 sWidthNumber 表示圖片元素從坐標點開始算，多大的寬度內容繪制Canvas畫布上。 sHeightNumber 表示圖片元素從坐標點開始算，多大的高度內容繪制Canvas畫布上。 雖然看上去有9大參數，但不用慌，實際上可以就3類參數： 第1類就是image，同上，沒什么好說的； 第2類就是dx，dy，dWidth和dHeight，表示在Canvas畫布上划出一片區域用來放置圖片，dx，dy為canvas元素的左上角坐標，dWidth，dHeight指Canvas元素上用在顯示圖片的區域大小。如果沒有指定dx，dy，dWidth和dHeight這4個參數，則圖片會被拉伸或縮放在這片區域內。 第3類就是sx，sy，sWidth和sHeight，你可以理解為對原始圖片的提前剪裁。sx，sy表示圖片上sx，sy這個坐標作為剪裁的左上角，sWidth和sHeight尺寸范圍是最終剪裁出來的圖片尺寸。sx，sy，sWidth和sHeight這4個參數就可以得到一個剪裁好的新圖，然后我們把這個新圖放在dx，dy，dWidth和dHeight這個Canvas畫布區域中，就是最終的效果。另外，此處的所有坐標和寬高值都是相對於圖片的原始尺寸而言的。
CanvasImageSource
其運行的圖片資源類型包括下面這些：
HTMLImageElement
也即是HTML中常用的<img>元素，可以是頁面中的DOM對象，也可以是內存中創建的IMG對象。
SVGImageElement
也就是SVG中的<image>元素。該接口繼承關系如下圖：
HTMLVideoElement
也就是HTML5中的<video>元素。該接口繼承關系如下圖：
HTMLCanvasElement
也就是HTML5中的<canvas>元素，詳見這里。
ImageBitmap (部分瀏覽器不支持支持度)
ImageBitmap接口表示一個位圖圖像，可以將其繪制到Canvas而不會產生不適當的延遲。
OffscreenCanvas
此接口提供了一個可以在屏幕外渲染的Canvas畫布。它在window和worker上下文中都可用。使用示意：
var offscreen = new OffscreenCanvas(256, 256);
此接口兼容性比較差，且專為WebGL設計。本文檔旨在推廣Canvas 2D API，因此不展開。
4.縮放變形
translate(x,y)
坐標系移動變換中心，也就是畫布移動
scale(x,y)
坐標系縮放，也就是畫布縮放
rotate(angle)
默認旋轉中心點是Canvas的左上角(0, 0)坐標點，如果希望改變旋轉中心點，例如以Canvas畫布的中心旋轉，需要先使用translate()位移旋轉中心點。
角度轉弧度計算公式是：radian = degree * Math.PI / 180。例如，旋轉45°，旋轉弧度就是45 * Math.PI / 180。
// 旋轉45度 context.rotate(45 * Math.PI / 180);
transfrom(a,b,c,d,e,f);
此方法可以對畫布進行進一步變換，已實現，縮放，宣傳，拉伸，或者位移效果。
單位：
a,b,c,d 水平縮放，位移 都是倍數
e，f位移 單位像素
各個參數含義和作用如下：
aNumber
水平縮放。
bNumber
水平斜切。
cNumber
垂直斜切。
dNumber
垂直縮放。
eNumber
水平位移。
fNumber
垂直位移。
setTransform(a,b,c,d,e,f);
此方法和transform()方法的區別在於，后者不會完全重置已有的變換，而是累加。
5.漸變、圖案繪制
CanvasGradient 對象
addColorStop(offset,color); 為漸變對象添加顏色值
各個參數含義和作用如下： offsetNumber 漸變點相對於整個漸變范圍的偏移，范圍是0-1。 colorString 漸變點的顏色值。只要能被正確解析為CSS顏色的值都是合法的。
表示cavans中的漸變對象。
createLinearGradient(x0,y0,x1,y1);
可以用來創建線性漸變對象，需要注意的事，這里的漸變坐標是全局的，而不是填充元素計算的。
各個參數含義和作用如下：
x0Number
漸變起始點橫坐標。
y0Number
漸變起始點縱坐標。
x1Number
漸變結束點橫坐標。
y1Number
漸變結束點縱坐標。
createRadialGradient(x0,y0,r0,x1,y1,r1);
x0Number
起始圓的橫坐標。
y0Number
起始圓的縱坐標。
r0Number
起始圓的半徑。
x1Number
結束圓的橫坐標。
y1Number
結束圓的縱坐標。
r1Number
結束圓的半徑。
CanvasPattern 對象
表示cavans中的圖案對象。此對象沒有暴露屬性和方法。
createPattern( image,repetition);
各個參數含義和作用如下： image Object 用來平鋪的CanvasImageSource圖像。可以是下面的類型： HTMLImageElement，也就是<img>元素。 HTMLVideoElement，也就是<video>元素，例如捕獲攝像頭視頻產生的圖像信息。 HTMLCanvasElement CanvasRenderingContext2D ImageBitmap ImageData Blob repetition String 圖案的平鋪方式，可以是下面的值： 'repeat'，水平和垂直平鋪。當repetition屬性值為空字符串''或者null，也會按照'repeat'進行渲染。 'repeat-x'，僅水平平鋪。 'repeat-y'，僅垂直平鋪。 'no-repeat'，不平鋪。
6.其他常用方法
save(),restore()
保存狀態，回復狀態
clearRect(x,y,width,height);
把cavans元素畫布中的莫一塊矩形變成透明的。 清空像素。
clip()
表示路徑裁剪。使用的時候，先繪制裁路徑，然后執行 clip() 方法，再繪制的內容就在這個剪切路徑中呈現。
context.clip();
context.clip(fillRule);
context.clip(path, fillRule);
各個參數含義和作用如下： fillRuleString 填充規則。用來確定一個點實在路徑內還是路徑外。可選值包括： nonzero：非零規則。此乃默認規則。 evenodd：奇偶規則。 關於'nonzero'和'evenodd'規則可參見這篇文章。 pathObject 指Path2D對象。
更多：