Canvas
Canvas標籤，用於在web中繪製各種圖形。Canvas爲基於像素的繪圖，繪製的圖像是位圖。也即Canvas繪圖的基本單位是像素。Canvas是一個相當於畫板的html節點，用js操作繪圖。
Canvas特點
- 依賴分辨率
- 不支持事件處理器
- 弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式保存結果圖像
- 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
Canvas基礎
若瀏覽器不支持HTML5的 <canvas>標籤。則把不支持信息寫在<canvas></canvas>之間。
例：
<canvas id="myCanvas" width="600" height="300">你的瀏覽器還不支持哦</canvas>。
<canvas>標籤，有兩個基本屬性：
| height 屬性 | 畫布的高度。和一幅圖像一樣，這個屬性可以指定爲一個整數像素值或者是窗口高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 150。 |
| width 屬性 | 畫布的寬度。和一幅圖像一樣，這個屬性可以指定爲一個整數像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。 |
獲取canvas對象
獲取canvas對象：var c=document.getElementById("myCanvas");
獲取2d繪圖對象（CanvasRenderingContext2D 對象）
這是通過 Canvas 對象的 getContext() 方法並且把直接量字符串 "2d" 作爲唯一的參數傳遞給它而獲得的。c.getContext("2d")，獲取的2d繪圖對象，相當於畫筆。
注意：無論調用多少次getContext()方法，獲取的對象都都是相同的。
canvas 屬性
這個環境可以繪製於其上的 Canvas 元素。
1. fillStyle 屬性
用來填充路徑的當前的顏色、模式或漸變。這個屬性可以設置爲一個字符串或者一個 CanvasGradient 對象 或 CanvasPattern 對象。當設置爲一個字符串時，它被解析爲一個 CSS 顏色值並且用來進行實心填充。當設置爲一個 CanvasGradient 或 CanvasPattern 對象，通過使用指定的漸變或模式來完成填充。
2. globalAlpha 屬性
指定在畫布上繪製的內容的不透明度。這個值的範圍在 0.0（完全透明）和 1.0（完全不透明）之間。默認值爲 1.0。
3. globalCompositeOperation 屬性
指定顏色如何與畫布上已有的顏色組合（合成）。如需更多細節，請參閱 globalCompositeOperation 屬性參考頁。
4. lineCap 屬性
指定線條的末端如何繪製。合法的值是 "butt"、"round" 和 "square"。默認值是 "butt"。如需更多細節，請參閱 lineCap 屬性參考頁。
5. lineJoin 屬性
指定兩條線條如何連接。合法的值是 "round"、"bevel" 和 "miter"。默認值是 "miter"。如需更多細節，請參閱 lineJoin 屬性參考頁。
6. lineWidth 屬性
指定了畫筆（繪製線條）操作的線條寬度。默認值是 1.0，並且這個屬性必須大於 0.0。較寬的線條在路徑上居中，每邊有線條寬的一半。
7. miterLimit 屬性
當 lineJoin 屬性爲 "miter" 的時候，這個屬性指定了斜連接長度和線條寬度的最大比率。如需更多細節，請參閱 miterLimit 屬性參考頁。
8. shadowBlur 屬性
指定羽化陰影的程度。默認值是 0。陰影效果得到 safari 的支持，但是並沒有得到 FireFox 1.5 或 Opera 9 的支持。
9. shadowColor 屬性
把陰影的顏色指定爲一個 CSS 字符串或 Web 樣式字符串，並且可以包含一個 alpha 部分來表示透明度。默認值是 black。陰影效果得到 Safari 的支持，但是並沒有得到 FireFox 1.5 或 Opera 9 的支持。
10. shadowOffsetX, shadowOffsetY 屬性
指定陰影的水平偏移和垂直偏移。較大的值使得陰影化的對象似乎漂浮在背景的較高位置上。默認值是 0。陰影效果得到 Safari 的支持，但是並沒有得到 FireFox 1.5 或 Opera 9 的支持。
11. strokeStyle 屬性
指定了用於畫筆（繪製）路徑的顏色、模式和漸變。這個屬性可能是一個字符串，或者一個 CanvasGradient 對象 或 CanvasPattern 對象。如果是一個字符串，它被解析爲一個 CSS 顏色值，並且畫筆用所得的實色來繪製。如果這個屬性的值是一個 CanvasGradient 對象或 CanvasPattern 對象，畫筆使用這個漸變或模式來實現。
2：繪圖對象的繪圖方法：
繪製路徑
beginPath() ：beginPath() 丟棄當前定義的路徑，開始一條新的路徑。
closePath() ：繪製路徑結束，它會繪製一個閉合的區間，添加一條起始位置到當前座標的閉合曲線。
moveTo(x,y) ：設置繪圖起始座標。
lineTo(x,y) ：從最後一點到點(x,y)繪製一條直線。
arc(x,y,radius,startAngle,endAngle,anticlockwise) ：繪製中心點在(x,y)的弧，半徑爲radius，角度在[startAngle,endAngle]之間（角度單位爲弧度）。anticlockwise爲布爾類型，若爲true表示逆時針；若爲false表示順時針。
arcTo(x1, y1, x2, y2, radius) ：創建兩切線之間的弧/曲線。圓弧是半徑爲radius的圓的部分。該圓弧有一個點與當前位置到P1(x1,y1)的線段相切，還有一個點和從P1(x1,y1)到P2(x2,y2)的線段相切。這兩個切點就是圓弧的起點和終點，圓弧繪製的方向就是連接這兩個點的最短圓弧的方向。
bezierCurveTo(c1x,c1y,c2x,c2y,x,y) ：使用控制點(c1x,c2y)和(c2x,c2y)從最後一點到點(x,y)繪製一條三次貝塞爾曲線。
quadraticCurveTo(cx,cy,x,y) ：控制點(cx,cy)從最後一點到點(x,y)，繪製一條貝塞爾曲線。
rect(x,y,width,height) ：爲當前路徑添加一條矩形路徑。矩形是路徑的一個子路徑，沒有和路徑中的任何其他子路徑相連。當 rect() 方法返回時，當前位置是 (0,0)。
stroke() ：渲染路徑。
說明：
1. 繪製路徑後，調用stroke()方法對路徑描邊。
2. 調用closePath()，表示路徑閉合。如果路徑已經閉合，可以調用fill()方法用fillStyle填充它。
3. 調用clip(),根據路徑創建一個剪裁區域。
4. isPointInPath(x,y) 判斷路徑是否存在於路徑之上。該方法在路徑關閉之前調用。
繪製矩形
clearRect(left,top,width,height) ：清除指定的矩形區域。
strokeRect(left,top,width,height) ：繪製矩形框。無填充色。框的顏色由strokeStyle屬性指定。strokeStyle屬性默認爲黑色('#000000')。
fillRect(left,top,width,height) ：繪製內部填充顏色的矩形。填充顏色由fillStyle屬性指定。fillStyle屬性默認爲黑色('#000000')。
繪製文本
文本繪製API不一定在瀏覽器中有實現。
繪製文本的context屬性
font
textAlign
textBaseline
fillText(text,x,y,) ：繪製實心文字。
stokeText(text,x,y,) ：繪製空心文字。
fill()，stroke()，clip()：在完成繪製的最後的填充和邊界輪廓，剪輯區域。
使用圖片
使用drawImage() 方法可以把圖片繪製到畫布上。該方法有有3個變形。
drawImage(image, x, y) ：把整個圖像複製到畫布，將其放置到指定點的左上角，並且將每個圖像像素映射到畫布上。
drawImage(image, x, y, width, height) ：把整個圖像複製到畫布，允許指定圖像的寬度和高度。
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) ：指定圖像的任何矩形區域，對畫布中的任何位置都可進行任何的縮放。
參數說明：
image 所要繪製的圖像。這必須是表示 <img> 標記或者屏幕外圖像的 Image 對象，或者是 Canvas 元素。
x, y 要繪製的圖像的左上角的位置。
width, height 圖像所應該繪製的尺寸。指定這些參數使得圖像可以縮放。
sourceX, sourceY 圖像將要被繪製的區域的左上角。這些整數參數用圖像像素來度量。
sourceWidth, sourceHeight 圖像所要繪製區域的大小，用圖像像素表示。
destX, destY 所要繪製的圖像區域的左上角的畫布座標。
destWidth, destHeight 圖像區域所要繪製的畫布大小。
座標變換
2D繪圖環境支持所有基本繪圖變換。當創建繪圖環境，變換矩陣便已經初始化了默認值。
translate(dx,dy) ：平移變換。將畫布按向量(dx,dy)平移。也即將原點移動到座標(dx,dy)。
rotate(a) ：旋轉變換，畫布繞原點旋轉a弧度角。
scale(scaleX,scaleY) ：縮放圖像，x軸放大scaleX，y軸放大scaleY。scaleX，scaleY默認都爲1.0。
高級變換
transform(m1_1,m1_2,m2_1,m2_2,dx,dy) ：將變換矩陣乘以以下矩陣。
| m1_1 | m1_2 | dx |
| m2_1 | m2_2 | dy |
| 0 | 0 | 1 |
setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy) ：重置變換矩陣到默認狀態，然後調用transform()。
平移 ：context.translate(dx,dy)可以使用context.transform (1,0,0,1,dx,dy)或者context.transform(0,1,1,0.dx,dy)代替。
旋轉 ：context.rotate(a)可以使用context.transform(Math.cos(a*Math.PI/180),Math.sin(a*Math.PI/180),-Math.sin(a*Math.PI/180),Math.cos(a*Math.PI/180),0,0)或者
context.transform(-Math.sin(a*Math.PI/180),Math.cos(a*Math.PI/180),Math.cos(a*Math.PI/180),Math.sin(a*Math.PI/180), 0,0)代替。
縮放 ：context.scale(sx, sy)可以使用context.transform(sx,0,0,sy,0,0)或者context.transform(0,sy,sx,0, 0,0)代替。
保存圖形狀態
save() 和 restore() 方法允許你保存和恢復一個 CanvasRenderingContext2D 對象的狀態。save() 把當前狀態推入到棧中，而 restore() 從棧的頂端彈出最近保存的狀態，並且根據這些存儲的值來設置當前繪圖狀態。
CanvasRenderingContext2D 對象的所有屬性（除了畫布的屬性是一個常量）都是保存的狀態的一部分。變換矩陣和剪切區域也是這個狀態的一部分，但是當前路徑和當前點並不是。
操作像素
createImageData
getImageData
putImageData
ImageData對象保存了圖像像素值。每個對象有三個屬性: width, height 和data。data 屬性類型爲CanvasPixelArray，用於儲存width*height*4個像素值。每一個像素有RGB值和透明度alpha值(其值爲 0 至255，包括alpha在內!)。像素的順序從左至右，從上到下，按行存儲。
漸變
Context對象可以通過createLinearGradient()和createRadialGradient()兩個方法創建漸變對象，這兩個方法的原型如下：
Object createLinearGradient(x1, y1, x2, y2) ：創建一個從(x1, y1)點到(x2, y2)點的線性漸變對象。
Object createRadialGradient(x1, y1, r1, x2, y2, r2) ：創建一個從以(x1, y1)點爲圓心、r1爲半徑的圓到以(x2, y2)點爲圓心、r2爲半徑的圓的徑向漸變對象。
漸變對象創建完成之後必須使用它的addColorStop()方法來添加顏色，該方法的原型如下：
void addColorStop(position, color) ：其中position表示添加顏色的位置，取值範圍爲[0, 1]，0表示起點，1表示終點；color表示添加的顏色，取值可以是任何CSS顏色值。
漸變對象創建並配置完成之後就可以將其賦予Context對象的strokeStyle屬性或者fillStyle屬性，然後繪製的圖形就具有了所需的漸變效果。