canvas元素是HTML5添加的最受歡迎的功能，這個元素負責在頁面中設定一個區域，然後使用JS就可以在這個區域中繪製圖形。canvas具備2D和3D畫圖能力，本文主要介紹2D畫圖。
基本用法
要使用canvas元素，必須設置其width和height屬性，指定可以繪圖的區域。要在這塊畫布上繪圖，需要取得繪圖上下文。而取得上下文的對象的引用，需要調用getContext()並傳入上下文的名字。傳入”2d”，就可以取得2D上下文的對象。
var context = t.getContext("2d"); //最好先判斷該對象是否爲空
2D上下文
使用2D繪圖上下文提供的方法，可以繪製簡單的2D圖形，比如矩形、弧線和路徑。2D上下文的座標開始於canvas元素的左上角，原地座標是（0,0）。所有座標都基於這個原點計算，x值越大表示越靠右，y值越大表示越靠下。默認情況下，width和height表示水平和垂直兩個方向可用像素數。
2D填充和描邊
2D上下文的兩種基本繪圖操作是填充和描邊。大多數2D上下文操作都會細分爲填充和描邊兩個操作，而操作的結果取決於兩個屬性：fillStyle和strokeStyle。這兩個屬性可以是表示顏色字符串、漸變對象或模式對象。顏色字符串可以是顏色名、十六進制、rgb等。
context.strokeStyle = "red"
context.strokeStyle = "#0000ff"
漸變對象和模式對象暫未用到。
繪製矩形
矩形是唯一一種可以直接在2D上下文中繪製的形狀。與矩形有關的方法包括fillRect()、strokeRect()、clearRect()。使用這三個方法時需要傳入4個參數，矩形的起始橫座標、矩形的起始縱座標、矩形的長（width）、矩形的寬（height）。填充時使用fillStyle屬性，描邊時使用strokeStyle屬性。
繪製路徑
使用2D上下文繪製路徑時，可以繪製出複雜的形狀和線條。要繪製路徑，首先必須調用beginPath()方法，表示要開始繪製新路徑。然後，再調用下列方法來實際地繪製路徑。
//角度用弧度表示，最後一個參數表示是否按順時針，false表示順時針方向計算
arc(x,y,radius,startAngle,endAngle,counterclockwise)
arcTo(x1,y1,x2,y2,radius)
quadraticCurveTo(...)
bezierCurveTo(...)
//移動遊標到（x,y）點
moveTo(x,y)
//從上一點開始繪製一條直線，到（x，y）爲止。
lineTo(x,y)
//畫一條長爲width，寬爲height的矩形
rect(x,y,width,height)
創建了路徑後，使用closePath()可以繪製出一條連接到路徑起點的線條。可以調用fill()函數使用fillStyle屬性填充，也可以使用stroke方法使用strokeStyle屬性進行描邊。
繪製文本
待續
變換
待續