1.繪圖
繪制一個填充的矩形
strokeRect(x, y, width, height)
繪制一個矩形的邊框
clearRect(x, y, width, height)
清除指定矩形區(qū)域，讓清除部分完全透明般码。
beginPath()
新建一條路徑狐蜕，生成之后鲜锚，圖形繪制命令被指向到路徑上生成路徑惭蹂。
closePath()
閉合路徑之后圖形繪制命令又重新指向到上下文中葵礼。
stroke()
通過線條來繪制圖形輪廓萨醒。
fill()
通過填充路徑的內(nèi)容區(qū)域生成實心的圖形烧栋。
moveTo(x,y)
將筆觸移動到指定的坐標(biāo)x以及y上写妥。
繪制一條從當(dāng)前位置到指定x以及y位置的直線。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心的以radius為半徑的圓簧笮铡（圓）珍特，從startAngle開始到endAngle結(jié)束，按照anticlockwise給定的方向（默認(rèn)為順時針）來生成邑跪。
根據(jù)給定的控制點和半徑畫一段圓弧次坡，再以直線連接兩個控制點。
quadraticCurveTo(cp1x, cp1y, x, y)
繪制二次貝塞爾曲線画畅，cp1x,cp1y為一個控制點砸琅，x,y為結(jié)束點。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪制三次貝塞爾曲線轴踱，cp1x,cp1y為控制點一症脂，cp2x,cp2y為控制點二，x,y為結(jié)束點淫僻。
rect(x,y,width,height)
繪制一個左上角坐標(biāo)為（x,y）诱篷，寬高為width以及height的矩形。
Path2D()會返回一個新初始化的Path2D對象（可能將某一個路徑作為變量——創(chuàng)建一個它的副本雳灵，或者將一個包含SVG path數(shù)據(jù)的字符串作為變量）棕所。
Path2D.addPath(path [, transform])?
添加了一條路徑到當(dāng)前路徑（可能添加了一個變換矩陣）。
示例：
? ? var ctx = canvas.getContext('2d');
? ? var rectangle = new Path2D();
? ? rectangle.rect(10, 10, 50, 50);
? ? var circle = new Path2D();
? ? circle.moveTo(125, 35);
? ? circle.arc(100, 35, 25, 0, 2 * Math.PI);
? ? ctx.stroke(rectangle);
? ? ctx.fill(circle);
2.圖形樣式
設(shè)置圖形的填充顏色悯辙。
設(shè)置圖形輪廓的顏色琳省。
globalAlpha = transparencyValue
這個屬性影響到 canvas 里所有圖形的透明度迎吵，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認(rèn)是 1.0针贬。
線型
設(shè)置線條寬度击费。
設(shè)置線條末端樣式。
butt桦他，round?和?square蔫巩。默認(rèn)是?butt。
設(shè)定線條與線條間接合處的樣式快压。
lineJoin?的屬性值決定了圖形中兩線段連接處所顯示的樣子圆仔。它可以是這三種之一：round,?bevel?和?miter。默認(rèn)是?miter嗓节。
限制當(dāng)兩條線相交時交接處最大長度荧缘；所謂交接處長度（斜接長度）是指線條交接處內(nèi)角頂點到外角頂點的長度。
返回一個包含當(dāng)前虛線樣式拦宣，長度為非負(fù)偶數(shù)的數(shù)組。
設(shè)置當(dāng)前虛線樣式信姓。
設(shè)置虛線樣式的起始偏移量鸵隧。
想要獲得精確的線條，必須對線條是如何描繪出來的有所理解意推。見下圖豆瘫，用網(wǎng)格來代表 canvas 的坐標(biāo)格，每一格對應(yīng)屏幕上一個像素點菊值。在第一個圖中外驱，填充了 (2,1) 至 (5,5) 的矩形，整個區(qū)域的邊界剛好落在像素邊緣上腻窒，這樣就可以得到的矩形有著清晰的邊緣昵宇。
漸變
createLinearGradient(x1, y1, x2, y2)
createLinearGradient?方法接受 4 個參數(shù)，表示漸變的起點 (x1,y1) 與終點 (x2,y2)儿子。
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient?方法接受 6 個參數(shù)瓦哎，前三個定義一個以 (x1,y1) 為原點，半徑為 r1 的圓柔逼，后三個參數(shù)則定義另一個以 (x2,y2) 為原點蒋譬，半徑為 r2 的圓。
gradient.addColorStop(position, color)
addColorStop?方法接受 2 個參數(shù)愉适，position?參數(shù)必須是一個 0.0 與 1.0 之間的數(shù)值犯助，表示漸變中顏色所在的相對位置。例如维咸，0.5 表示顏色會出現(xiàn)在正中間剂买。color?參數(shù)必須是一個有效的 CSS 顏色值（如 #FFF惠爽， rgba(0,0,0,1)，等等）雷恃。
圖案樣式
該方法接受兩個參數(shù)疆股。Image 可以是一個?Image?對象的引用，或者另一個 canvas 對象倒槐。Type?必須是下面的字符串值之一：repeat旬痹，repeat-x，repeat-y?和?no-repeat讨越。
陰影
shadowOffsetX?和?shadowOffsetY?用來設(shè)定陰影在 X 和 Y 軸的延伸距離两残，它們是不受變換矩陣所影響的。負(fù)值表示陰影會往上或左延伸把跨，正值則表示會往下或右延伸人弓，它們默認(rèn)都為?0。
shadowOffsetX?和?shadowOffsetY?用來設(shè)定陰影在 X 和 Y 軸的延伸距離着逐，它們是不受變換矩陣所影響的崔赌。負(fù)值表示陰影會往上或左延伸，正值則表示會往下或右延伸耸别，它們默認(rèn)都為?0健芭。
shadowBlur?用于設(shè)定陰影的模糊程度，其數(shù)值并不跟像素數(shù)量掛鉤秀姐，也不受變換矩陣的影響慈迈，默認(rèn)為?0。
shadowColor?是標(biāo)準(zhǔn)的 CSS 顏色值省有，用于設(shè)定陰影顏色效果痒留，默認(rèn)是全透明的黑色。
繪制文本
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本蠢沿，繪制的最大寬度是可選的.
strokeText(text, x, y [, maxWidth])? 邊框文本
在指定的(x,y)位置繪制文本邊框伸头，繪制的最大寬度是可選的.
當(dāng)前我們用來繪制文本的樣式. 這個字符串使用和CSSfont屬性相同的語法. 默認(rèn)的字體是?10px sans-serif。
文本對齊選項. 可選的值包括：start,?end,?left,?right?or?center. 默認(rèn)值是?start搏予。
基線對齊選項. 可選的值包括：top,?hanging,?middle,?alphabetic,?ideographic,?bottom熊锭。默認(rèn)值是?alphabetic。
文本方向雪侥⊥胍螅可能的值包括：ltr,?rtl,?inherit。默認(rèn)值是?inherit速缨。
將返回一個TextMetrics對象的寬度锌妻、所在像素，這些體現(xiàn)文本特性的屬性旬牲。
3繪制圖片
獲得需要繪制的圖片
canvas的API可以使用下面這些類型中的一種作為圖片的源：
這些圖片是由Image()函數(shù)構(gòu)造出來的仿粹，或者任何的<img>元素
用一個HTML的<video>元素作為你的圖片源搁吓，可以從視頻中抓取當(dāng)前幀作為一個圖像
可以使用另一個<canvas>元素作為你的圖片源。
這是一個高性能的位圖吭历，可以低延遲地繪制堕仔，它可以從上述的所有源以及其它幾種源中生成。
生成圖片元素
var img = new Image();? // 創(chuàng)建img元素
img.onload = function(){
? // 執(zhí)行drawImage語句
}
img.src = 'myImage.png'; // 設(shè)置圖片源地址
繪制圖片
drawImage(image, x, y)
其中?image?是 image 或者 canvas 對象晌区，x?和?y 是其在目標(biāo) canvas 里的起始坐標(biāo)摩骨。
drawImage(image, x, y, width, height)
這個方法多了2個參數(shù)：width?和?height，這兩個參數(shù)用來控制?當(dāng)向canvas畫入時應(yīng)該縮放的大小
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一個參數(shù)和其它的是相同的朗若，都是一個圖像或者另一個 canvas 的引用恼五。其它8個參數(shù)最好是參照右邊的圖解，前4個是定義圖像源的切片位置和大小哭懈，后4個則是定義切片的目標(biāo)顯示位置和大小灾馒。
控制圖像的縮放行為 Controlling image scaling behavior
過度縮放圖像可能會導(dǎo)致圖像模糊或像素化。您可以通過使用繪圖環(huán)境的imageSmoothingEnabled屬性來控制是否在縮放圖像時使用平滑算法遣总。默認(rèn)值為true睬罗，即啟用平滑縮放。您也可以像這樣禁用此功能：
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
4.canvas 的狀態(tài)
保存畫布(canvas)的所有狀態(tài)
save 和 restore 方法是用來保存和恢復(fù) canvas 狀態(tài)的旭斥，都沒有參數(shù)傅物。Canvas 的狀態(tài)就是當(dāng)前畫面應(yīng)用的所有樣式和變形的一個快照。
5.平移琉预，旋轉(zhuǎn)，縮放
我們先介紹?translate?方法蒿褂，它用來移動 canvas 和它的原點到一個不同的位置圆米。
translate(x, y)
translate?方法接受兩個參數(shù)。x?是左右偏移量啄栓，y是上下偏移量娄帖，如右圖所示。
第二個介紹?rotate?方法昙楚，它用于以原點為中心旋轉(zhuǎn) canvas近速。
rotate(angle)
這個方法只接受一個參數(shù)：旋轉(zhuǎn)的角度(angle)，它是順時針方向的堪旧，以弧度為單位的值削葱。
旋轉(zhuǎn)的中心點始終是 canvas 的原點，如果要改變它淳梦，我們需要用到?translate?方法析砸。
接著是縮放。我們用它來增減圖形在 canvas 中的像素數(shù)目爆袍，對形狀，位圖進(jìn)行縮小或者放大。
scale(x, y)
scale??方法可以縮放畫布的水平和垂直的單位逸绎。兩個參數(shù)都是實數(shù)茴晋，可以為負(fù)數(shù)，x 為水平縮放因子蝴蜓，y 為垂直縮放因子，如果比1小，會縮小圖形咏尝， 如果比1大會放大圖形。默認(rèn)值為1闲先， 為實際大小状土。
最后一個方法允許對變形矩陣直接修改。
這個方法是將當(dāng)前的變形矩陣乘上一個基于自身參數(shù)的矩陣伺糠，如下面的矩陣所示：
\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
如果任意一個參數(shù)是Infinity蒙谓，變形矩陣也必須被標(biāo)記為無限大，否則會拋出異常训桶。
這個函數(shù)的參數(shù)各自代表如下：
a (m11)
水平方向的縮放
b(m12)
豎直方向的傾斜偏移
c(m21)
水平方向的傾斜偏移
d(m22)
豎直方向的縮放
e(dx)
水平方向的移動
f(dy)
豎直方向的移動
setTransform(a, b, c, d, e, f)
這個方法會將當(dāng)前的變形矩陣重置為單位矩陣累驮，然后用相同的參數(shù)調(diào)用?transform?方法。如果任意一個參數(shù)是無限大舵揭，那么變形矩陣也必須被標(biāo)記為無限大谤专，否則會拋出異常。從根本上來說午绳，該方法是取消了當(dāng)前變形,然后設(shè)置為指定的變形,一步完成置侍。
重置當(dāng)前變形為單位矩陣，它和調(diào)用以下語句是一樣的：ctx.setTransform(1, 0, 0, 1, 0, 0);
我們不僅可以在已有圖形后面再畫新圖形拦焚，還可以用來遮蓋指定區(qū)域蜡坊，清除畫布中的某些部分（清除區(qū)域不僅限于矩形，像clearRect()方法做的那樣）以及更多其他操作赎败。
globalCompositeOperation = type
這個屬性設(shè)定了在畫新圖形時采用的遮蓋策略秕衙，其值是一個標(biāo)識12種遮蓋方式的字符串。
裁切路徑和普通的 canvas 圖形差不多僵刮，不同的是它的作用是遮罩据忘，用來隱藏不需要的部分。如右圖所示搞糕。紅邊五角星就是裁切路徑勇吊，所有在路徑以外的部分都不會在 canvas 上繪制出來。
如果和上面介紹的?globalCompositeOperation?屬性作一比較寞宫，它可以實現(xiàn)與?source-in?和?source-atop差不多的效果萧福。最重要的區(qū)別是裁切路徑不會在 canvas 上繪制東西，而且它永遠(yuǎn)不受新圖形的影響辈赋。這些特性使得它在特定區(qū)域里繪制圖形時相當(dāng)好用鲫忍。
在繪制圖形一章中膏燕，我只介紹了?stroke?和?fill?方法，這里介紹第三個方法clip悟民。
將當(dāng)前正在構(gòu)建的路徑轉(zhuǎn)換為當(dāng)前的裁剪路徑坝辫。
我們使用?clip()方法來創(chuàng)建一個新的裁切路徑。
默認(rèn)情況下射亏，canvas 有一個與它自身一樣大的裁切路徑（也就是沒有裁切效果）近忙。
6.動畫
你可以通過以下的步驟來畫出一幀:
清空 canvas
除非接下來要畫的內(nèi)容會完全充滿 canvas （例如背景圖），否則你需要清空所有智润。最簡單的做法就是用?clearRect?方法及舍。
保存 canvas 狀態(tài)
如果你要改變一些會改變 canvas 狀態(tài)的設(shè)置（樣式，變形之類的）窟绷，又要在每畫一幀之時都是原始狀態(tài)的話锯玛，你需要先保存一下。
繪制動畫圖形（animated shapes）
這一步才是重繪動畫幀兼蜈。
恢復(fù) canvas 狀態(tài)
如果已經(jīng)保存了 canvas 的狀態(tài)攘残，可以先恢復(fù)它，然后重繪下一幀为狸。
首先歼郭，可以用window.setInterval(),window.setTimeout(),和window.requestAnimationFrame()來設(shè)定定期執(zhí)行一個指定函數(shù)。
當(dāng)設(shè)定好間隔時間后辐棒，function會定期執(zhí)行病曾。
在設(shè)定好的時間之后執(zhí)行函數(shù)
requestAnimationFrame(callback)
告訴瀏覽器你希望執(zhí)行一個動畫，并在重繪之前漾根，請求瀏覽器執(zhí)行一個特定的函數(shù)來更新動畫知态。
7.像素操作
ImageData對象中存儲著canvas對象真實的像素數(shù)據(jù)凰浮，它包含以下幾個只讀屬性：
width
圖片寬度励烦，單位是像素
height
圖片高度夭禽，單位是像素
data
Uint8ClampedArray類型的一維數(shù)組，包含著RGBA格式的整型數(shù)據(jù)秘蛇，范圍在0至255之間（包括255）。
保存圖片
HTMLCanvasElement提供一個toDataURL()方法顶考，此方法在保存圖片的時候非常有用赁还。它返回一個包含被類型參數(shù)規(guī)定的圖像表現(xiàn)格式的數(shù)據(jù)鏈接。返回的圖片分辨率是96dpi驹沿。
默認(rèn)設(shè)定艘策。創(chuàng)建一個PNG圖片。
Default setting. Creates a PNG image.
canvas.toDataURL('image/jpeg', quality)
創(chuàng)建一個JPG圖片渊季。你可以有選擇地提供從0到1的品質(zhì)量朋蔫，1表示最好品質(zhì)罚渐，0基本不被辨析但有比較小的文件大小。
當(dāng)你從畫布中生成了一個數(shù)據(jù)鏈接驯妄，例如荷并，你可以將它用于任何<image>元素，或者將它放在一個有download屬性的超鏈接里用于保存到本地青扔。
你也可以從畫布中創(chuàng)建一個Blob對像源织。
canvas.toBlob(callback, type, encoderOptions)
這個創(chuàng)建了一個在畫布中的代表圖片的Blob對像。
8.canvas的交互
以下API已廢棄微猖，Chrome不可用谈息，不建議使用。
判斷鼠標(biāo)坐標(biāo)是否在canvas上一個特定區(qū)域里一直是個有待解決的問題凛剥。hit region API讓你可以在canvas上定義一個區(qū)域侠仇，這讓無障礙工具獲取canvas上的交互內(nèi)容成為可能。它能讓你更容易地進(jìn)行點擊檢測并把事件轉(zhuǎn)發(fā)到DOM元素去当悔。這個API有以下三個方法（都是實驗性特性傅瞻，請先在瀏覽器兼容表上確認(rèn)再使用）。
CanvasRenderingContext2D.addHitRegion()
在canvas上添加一個點擊區(qū)域盲憎。
CanvasRenderingContext2D.removeHitRegion()
從canvas上移除指定id的點擊區(qū)域嗅骄。
CanvasRenderingContext2D.clearHitRegions()
移除canvas上的所有點擊區(qū)域。
