瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法。注釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

width/height 屬性

畫布的寬高。和一幅圖像一樣，這個屬性可以指定為一個整數(shù)像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經(jīng)完成的任何繪圖都會擦除掉。默認值是 300

Canvas 對象的方法

   var canvas = document.getElementById('canvas); var ctx =      
   canvas.getContext('2d'); //返回一個用于在畫布上繪圖的環(huán)境。

顏色、樣式和陰影

|屬性|描述|
|-----||---|
|fillStyle |設(shè)置或返回用于填充繪畫的顏色、漸變或模式|
|strokeStyle| 設(shè)置或返回用于筆觸的顏色、漸變或模式|
|shadowColor |設(shè)置或返回用于陰影的顏色|
|shadowBlur| 設(shè)置或返回用于陰影的模糊級別|
|shadowOffsetX |設(shè)置或返回陰影距形狀的水平距離|
|shadowOffsetY |設(shè)置或返回陰影距形狀的垂直距離|

|方法 |描述|
|-----||---|
|createLinearGradient(x開始,y開始,x結(jié)束,y結(jié)束)| 創(chuàng)建線性漸變（用在畫布內(nèi)容上）|
|createPattern(image,"repeat或repeat-x或repeat-y或no-repeat")| 在指定的方向上重復(fù)指定的元素|
|createRadialGradient(x開始,y開始,r開始半徑,x1結(jié)束,y1結(jié)束,r1結(jié)束半徑)| 創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內(nèi)容上）|
|addColorStop(stop,color) |規(guī)定漸變對象中的顏色和停止位置|
線條樣式

|屬性 |描述|
|-----||---|
|lineCap| 設(shè)置或返回線條的結(jié)束端點樣式|
|lineJoin| 設(shè)置或返回兩條線相交時，所創(chuàng)建的拐角類型|
|lineWidth |設(shè)置或返回當前的線條寬度|
|miterLimit| 設(shè)置或返回最大斜接長度|
路徑

|方法| 描述|
|-----||--|
|fill() |填充當前繪圖（路徑）|
|stroke() |繪制已定義的路徑|
|beginPath()| 起始一條路徑，或重置當前路徑|
|moveTo(x,y) |把路徑移動到畫布中的指定點，不創(chuàng)建線條|
|closePath()| 創(chuàng)建從當前點回到起始點的路徑|
|lineTo(x,y) |添加一個新點，然后在畫布中創(chuàng)建從該點到最后指定點的線條|
|clip() |從原始畫布剪切任意形狀和尺寸的區(qū)域|
|quadraticCurveTo(cpx,cpy,x,y) |創(chuàng)建二次貝塞爾曲線|
|bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) |創(chuàng)建三次方貝塞爾曲線|
|arc(x,y,r,sAngle,eAngle,counterclockwise) |創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）|
|arcTo(x1,y1,x2,y2,r) |創(chuàng)建兩切線之間的弧/曲線|
|isPointInPath(x,y)| 如果指定的點位于當前路徑中，則返回 true，否則返回 false|
轉(zhuǎn)換

|方法| 描述|
|-----||---|
|scale(scalewidth,scaleheight) |縮放當前繪圖至更大或更小|
|rotate(angle)| 旋轉(zhuǎn)當前繪圖|
|translate(x,y) |重新映射畫布上的 (0,0) 位置|
|transform(水平縮放繪圖,水平傾斜繪圖,垂直傾斜繪圖,垂直縮放繪圖,水平移動繪圖,垂直移動繪圖) |替換繪圖的當前轉(zhuǎn)換矩陣|
|setTransform(參數(shù)同上) |將當前轉(zhuǎn)換重置為單位矩陣。然后運行 transform()|
文本

|屬性 |描述|
|-----||---|
|font |設(shè)置或返回文本內(nèi)容的當前字體屬性|
|textAlign |設(shè)置或返回文本內(nèi)容的當前對齊方式|
|textBaseline| 設(shè)置或返回在繪制文本時使用的當前文本基線|

|方法|描述|
|-----||---|
|fillText(text,x,y,maxWidth)|在畫布上繪制“被填充的”文本|
|strokeText(text,x,y,maxWidth)|在畫布上繪制文本（無填充）|
|measureText(text)|返回包含指定文本寬度的對象|
圖像繪制

|方法|描述|
|-----||---|
|drawImage(img,sx,sy,swidth,sheight,x,y,width,height)|向畫布上繪制圖像、畫布或視頻|
像素操作

|屬性 |描述|
|-----||---|
|width |返回 ImageData 對象的寬度|
|height |返回 ImageData 對象的高度|
|data |返回一個對象，其包含指定的 ImageData 對象的圖像數(shù)據(jù)|

|方法|描述|
|-----||---|
|createImageData()|創(chuàng)建新的、空白的 ImageData 對象|
|getImageData(x,y,width,height)|返回 ImageData 對象，該對象為畫布上指定的矩形復(fù)制像素數(shù)據(jù)|
|putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)|把圖像數(shù)據(jù)（從指定的 ImageData 對象）放回畫布上|
合成

|屬性|描述|
|-----||---|
|globalAlpha |設(shè)置或返回繪圖的當前 alpha 或透明值|
|globalCompositeOperation |設(shè)置或返回新圖像如何繪制到已有的圖像上|

其他

|方法| 描述|
|-----||---|
|save()| 保存當前環(huán)境的狀態(tài)|
|restore() |返回之前保存過的路徑狀態(tài)和屬性|