context . restore() //彈出堆最上面保存的繪圖狀態
context . save() //在繪圖狀態堆上保存當前繪圖狀態
繪圖狀態可以看作當前畫面應用的所有樣式和變形的一個快照。而狀態的應用則可以避免繪圖代碼的過度膨脹。
轉換(Transformations)
context . rotate(angle) //按給定的弧度旋轉,按順時針旋轉
context . scale(x, y) //按給定的縮放倍率縮放，1.0,為不變
context . setTransform(m11, m12, m21, m22, dx, dy)//重設當前的轉換到
context . transform(m11, m12, m21, m22, dx, dy) //矩陣變換，結果等於當前的變形矩陣乘上
context . translate(x, y) //可以理解為偏移，向 x,y方向偏移指定的量,其用來移動 Canvas 的原點到一個指定的值
合成（Compositing）
context . globalAlpha [ = value ] //0-1.0之間的數據，設定圖像的透明度
context . globalCompositeOperation [ = value ] //設定重疊圖像的覆蓋方式，可以設定為(注，值大小寫敏感)：
顏色和風格
context . fillStyle [ = value ] //返回填充形狀的當前風格，能被設置以用來改變當前的填充風格，其值可以是CSS顏色字串，也可以是CanvasGradient或者 CanvasPattern 對象，非法的值將被忽略。
context . strokeStyle [ = value ] //返回當前描繪形狀的風格，能被設置，其值同上。
gradient . addColorStop(offset, color) //在給定偏移的地方增加一個漸變顏色點，偏移量取值范圍為 0-1.0 之間，否則產生一個 INDEX_SIZE_ERR的異常，color 為 DOM 字符串，如果不能解析，則拋出一個 SYNTAX_ERR的異常
gradient = context . createLinearGradient(x0, y0, x1, y1) //建立一個線性漸變，如果任何一個參數不是有限值，則拋出一個NOT_SUPPORTED_ERR的異常。
gradient = context . createRadialGradient(x0, y0, r0, x1, y1, r1) //建立一個徑向漸變，如果任何一個參數不是有限值，則拋出一個NOT_SUPPORTED_ERR的異常。假如 r0或 r1 為負值，則拋出 INDEX_SIZE_ERR的異常。
pattern = context . createPattern(image, repetition)
本方法用指定的圖像和重復方向建立一個畫布圖案對象，image 參數可為 img,canvas,video 元素中的任一個，如果不滿足此條件，則拋出TYPE_MISMATCH_ERR 異常，如果圖片編碼未知或沒有圖像數據，則拋出INVALID_STATE_ERR 異常；
第二個參數可以是下列值：
repeat 默認參數，如果為空，則為此參數，表示兩個方向重復
repeat-x 僅水平重復
repeat-y 僅垂直重復
no-repeat 不重復
canvas的狀態
每個上下文都包含一個繪圖狀態的堆，繪圖狀態包含下列內容：
$ 當前的 transformation matrix.
$ 當前的 clipping region
$ 當前的屬性值：fillStyle, font, globalAlpha,
globalCompositeOperation, lineCap, lineJoin,
lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign,
textBaseline
注：當前 path 和當前 bitmap 不是繪圖狀態的一部分，當前 path 是持久
存在的，僅能被 beginPath()復位，當前 bitmap 是 canvas 的屬性，而非繪
圖上下文。
View Code
var context = canvas.getContext('2d'); context.fillRect(0,0,50,50); canvas.setAttribute('width', '300'); // clears the canvas context.fillRect(0,100,50,50); canvas.width = canvas.width; // clears the canvas context.fillRect(100,0,50,50); // only this square remains