描述
在HTML5 <canvas>標籤用來繪製圖形，上飛，通過腳本（通常是JavaScript）。
然而， <canvas>元素都有自己的圖紙暫能力（這只是圖形的容器） -你必須使用腳本來實際繪製圖形。
該getContext()方法返回一個對象，它提供方法和屬性，在畫布上畫畫。
該參考文獻將覆蓋的屬性和方法getContext("2d")的對象，它可以用於繪製文本，線，矩形，圓形和多-在畫布上。
瀏覽器支持
在表中的數字指定完全支持元件的第一個瀏覽器的版本。
| 元件 | |||||
|---|---|---|---|---|---|
| <canvas> | 4 | 9 | 2.0 | 3.1 | 9 |
Internet Explorer 9中，火狐，歌劇，鉻，和Safari支持<canvas>和它的屬性和方法。
注：Internet Explorer 8和更早的版本，不支持<canvas>元素。
顏色，款式和陰影
| 屬性 | 描述 |
|---|---|
| fillStyle | 設置或返回的顏色，漸變或圖案用來填充繪製 |
| strokeStyle | 設置或返回的顏色，漸變或圖案用於中風 |
| shadowColor | 設置或返回用於陰影的顏色 |
| shadowBlur | 設置或返回陰影模糊度 |
| shadowOffsetX | 設置或從外形返回陰影的水平距離 |
| shadowOffsetY | 設置或從外形返回陰影的垂直距離 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 創建一個線性漸變（以在畫布上的內容使用） |
| createPattern() | 在重複指定的方向上指定的元素 |
| createRadialGradient() | 創建一個徑向/圓形梯度（以在畫布上的內容使用） |
| addColorStop() | 指定顏色和漸變對象停止位置 |
線型
| 屬性 | 描述 |
|---|---|
| lineCap | 設置或返回端蓋的風格一行 |
| lineJoin | 設置或返回角落創建的類型，當兩條線滿足 |
| lineWidth | 設置或返回當前線寬 |
| miterLimit | 設置或返回最大斜接長度 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 創建一個矩形， |
| fillRect() | 繪製一個“裝”的矩形 |
| strokeRect() | 繪製一個矩形（無填充顏色） |
| clearRect() | 清除一個給定的矩形內指定的像素 |
路徑
| 方法 | 描述 |
|---|---|
| fill() | 填充當前繪圖（路徑） |
| stroke() | 其實吸引你所定義的路徑 |
| beginPath() | 開始的路徑，或復位電流路徑 |
| moveTo() | 移動路徑在畫布指定的點，而無需創建一個行 |
| closePath() | 創建從當前點的路徑回到起點 |
| lineTo() | 添加新的點，並在畫布上創建一個從最後一個指定點線，該點 |
| clip() | 從原來的畫布剪輯任何形狀和大小的區域 |
| quadraticCurveTo() | 創建一個二次貝塞爾曲線 |
| bezierCurveTo() | 創建一個三次Bezier曲線 |
| arc() | 創建圓弧/曲線（用於創建圓，或圓的部分） |
| arcTo() | 創建兩個切線之間的弧/曲線 |
| isPointInPath() | 如果指定點在當前路徑返回true，否則為false |
轉換
| 方法 | 描述 |
|---|---|
| scale() | 縮放當前的繪圖大或變小 |
| rotate() | 旋轉當前圖紙 |
| translate() | 重新映射畫布上的（0,0）位置 |
| transform() | 替換當前變換矩陣為繪圖 |
| setTransform() | 重置電流變換為單位矩陣。 然後運行變換（） |
文本
| 屬性 | 描述 |
|---|---|
| font | 設置或返回文本內容的當前字體屬性 |
| textAlign | 設置或返回文本內容的當前對齊 |
| textBaseline | 設置或返回當前文本基線繪製文本時使用 |
| 方法 | 描述 |
|---|---|
| fillText() | 繪製在畫布上“裝”的文字 |
| strokeText() | 繪製在畫布上（無填充顏色）的文本 |
| measureText() | 返回包含指定文本的寬度對象 |
圖像繪製
| 方法 | 描述 |
|---|---|
| drawImage() | 繪製的圖像，帆布或視頻到畫布 |
像素處理
| 屬性 | 描述 |
|---|---|
| width | 返回的ImageData對象的寬度 |
| height | 返回的ImageData對象的高度 |
| data | 返回包含一個指定的ImageData對象的圖像數據中的對象 |
| 方法 | 描述 |
|---|---|
| createImageData() | 創建一個新的，空白的ImageData對象 |
| getImageData() | 返回的ImageData對象副本在畫布上指定的矩形的像素數據 |
| putImageData() | 將圖像數據（從指定的ImageData對象）放回畫布 |
合成
| 屬性 | 描述 |
|---|---|
| globalAlpha | 設置或返回繪圖的當前alpha或透明度值 |
| globalCompositeOperation | 新的圖像是如何繪製到現有的圖像設置或返回 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存當前上下文的狀態 |
| restore() | 返回先前保存的路徑狀態和屬性 |
| createEvent() | |
| getContext() | |
| toDataURL() |