瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法。
注釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
width/height 屬性
畫布的寬高。和一幅圖像一樣，這個(gè)屬性可以指定為一個(gè)整數(shù)像素值或者是窗口寬度的百分比。當(dāng)這個(gè)值改變的時(shí)候，在該畫布上已經(jīng)完成的任何繪圖都會(huì)擦除掉。默認(rèn)值是 300
Canvas 對(duì)象的方法
var canvas = document.getElementById('canvas);
var ctx = canvas.getContext('2d'); //返回一個(gè)用于在畫布上繪圖的環(huán)境。
顏色、樣式和陰影
| 屬性 | 描述 |
|---|---|
| fillStyle | 設(shè)置或返回用于填充繪畫的顏色、漸變或模式 |
| strokeStyle | 設(shè)置或返回用于筆觸的顏色、漸變或模式 |
| shadowColor | 設(shè)置或返回用于陰影的顏色 |
| shadowBlur | 設(shè)置或返回用于陰影的模糊級(jí)別 |
| 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ī)定漸變對(duì)象中的顏色和停止位置 |
線條樣式
| 屬性 | 描述 |
|---|---|
| lineCap | 設(shè)置或返回線條的結(jié)束端點(diǎn)樣式 |
| lineJoin | 設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的拐角類型 |
| lineWidth | 設(shè)置或返回當(dāng)前的線條寬度 |
| miterLimit | 設(shè)置或返回最大斜接長(zhǎng)度 |
矩形
| 方法 | 描述 |
|---|---|
| rect(矩形左上角x坐標(biāo),矩形左上角y坐標(biāo),width,height) | 創(chuàng)建矩形 |
| fillRect(x,y,width,height) | 繪制“被填充”的矩形 |
| strokeRect(x,y,width,height) | 繪制矩形（無填充） |
| clearRect(x,y,width,height) | 在給定的矩形內(nèi)清除指定的像素 |
路徑
| 方法 | 描述 |
|---|---|
| fill() | 填充當(dāng)前繪圖（路徑） |
| stroke() | 繪制已定義的路徑 |
| beginPath() | 起始一條路徑，或重置當(dāng)前路徑 |
| moveTo(x,y) | 把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條 |
| closePath() | 創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑 |
| lineTo(x,y) | 添加一個(gè)新點(diǎn)，然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條 |
| 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) | 如果指定的點(diǎn)位于當(dāng)前路徑中，則返回 true，否則返回 false |
轉(zhuǎn)換
| 方法 | 描述 |
|---|---|
| scale(scalewidth,scaleheight) | 縮放當(dāng)前繪圖至更大或更小 |
| rotate(angle) | 旋轉(zhuǎn)當(dāng)前繪圖 |
| translate(x,y) | 重新映射畫布上的 (0,0) 位置 |
| transform(水平縮放繪圖,水平傾斜繪圖,垂直傾斜繪圖,垂直縮放繪圖,水平移動(dòng)繪圖,垂直移動(dòng)繪圖) | 替換繪圖的當(dāng)前轉(zhuǎn)換矩陣 |
| setTransform(參數(shù)同上) | 將當(dāng)前轉(zhuǎn)換重置為單位矩陣。然后運(yùn)行 transform() |
文本
| 屬性 | 描述 |
|---|---|
| font | 設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性 |
| textAlign | 設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式 |
| textBaseline | 設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線 |
| 方法 | 描述 |
|---|---|
| fillText(text,x,y,maxWidth) | 在畫布上繪制“被填充的”文本 |
| strokeText(text,x,y,maxWidth) | 在畫布上繪制文本（無填充） |
| measureText(text) | 返回包含指定文本寬度的對(duì)象 |
圖像繪制
| 方法 | 描述 |
|---|---|
| drawImage(img,sx,sy,swidth,sheight,x,y,width,height) | 向畫布上繪制圖像、畫布或視頻 |
像素操作
| 屬性 | 描述 |
|---|---|
| width | 返回 ImageData 對(duì)象的寬度 |
| height | 返回 ImageData 對(duì)象的高度 |
| data | 返回一個(gè)對(duì)象，其包含指定的 ImageData 對(duì)象的圖像數(shù)據(jù) |
| 方法 | 描述 |
|---|---|
| createImageData() | 創(chuàng)建新的、空白的 ImageData 對(duì)象 |
| getImageData(x,y,width,height) | 返回 ImageData 對(duì)象，該對(duì)象為畫布上指定的矩形復(fù)制像素?cái)?shù)據(jù) |
| putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight) | 把圖像數(shù)據(jù)（從指定的 ImageData 對(duì)象）放回畫布上 |
合成
| 屬性 | 描述 |
|---|---|
| globalAlpha | 設(shè)置或返回繪圖的當(dāng)前 alpha 或透明值 |
| globalCompositeOperation | 設(shè)置或返回新圖像如何繪制到已有的圖像上 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存當(dāng)前環(huán)境的狀態(tài) |
| restore() | 返回之前保存過的路徑狀態(tài)和屬性 |
