畫布對象
Canvas對象是HTML5新。
HTML5的<canvas>標記用於繪製圖形，在飛行中，用JavaScript。
進入一個Canvas對象
可以訪問一個<canvas>通過使用元素getElementById()
創建一個Canvas對象
可以創建一個<canvas>使用元素document. createElement() document. createElement()方法：
注： <canvas>元素都有自己的無圖紙的能力（這是僅適用於圖形容器） -你必須使用腳本來實際繪製圖形。
所述getContext()方法返回一個對象，它提供的方法和屬性用於在畫布上繪圖。
該參考將覆蓋的屬性和方法getContext("2d")對象，它可用於繪製文本，線，矩形，圓形，多-在畫布上。
顏色，款式和陰影
| 屬性 | 描述 |
|---|---|
| fillStyle | 設置或返回顏色，梯度，或圖案用來填充圖 |
| strokeStyle | 設置或返回顏色，梯度，或圖案用於筆劃 |
| shadowColor | 設置或返回用於陰影的顏色 |
| shadowBlur | 設置或返回陰影模糊等級 |
| shadowOffsetX | 設置或從形狀返回陰影的水平距離 |
| shadowOffsetY | 設置或從形狀返回陰影的垂直距離 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 創建的線性梯度(to use on canvas content) |
| createPattern() | 重複在指定的方向上的規定的元件 |
| createRadialGradient() | 創建一個徑向/圓形梯度(to use on canvas content) |
| addColorStop() | 指定顏色和漸變對象終點位置 |
線型
| 屬性 | 描述 |
|---|---|
| lineCap | 設置或返回端蓋的風格線 |
| lineJoin | 設置或返回角落創建的類型，當兩條線滿足 |
| lineWidth | 設置或返回當前線寬 |
| miterLimit | 設置或返回的最大長度斜切 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 創建一個矩形 |
| fillRect() | 繪製一個"filled"矩形 |
| strokeRect() | 繪製一個矩形(no fill) |
| clearRect() | 清除一個給定的矩形內的指定的像素 |
路徑
| 方法 | 描述 |
|---|---|
| fill() | 填充當前繪圖(path) |
| stroke() | 其實吸引你所定義的路徑 |
| beginPath() | 開始的路徑，或重置當前路徑 |
| moveTo() | 移動路徑在畫布上指定的點，而無需創建一個行 |
| closePath() | 創建從當前點的路徑回到起點 |
| lineTo() | 添加新的點，並在畫布上創建一個從點到最後指定點的直線 |
| clip() | 從原來的畫布剪輯的任何形狀和大小的區域 |
| quadraticCurveTo() | 創建二次貝塞爾曲線 |
| bezierCurveTo() | 創建一個三次Bezier曲線 |
| arc() | 創建圓弧/曲線(used to create circles, or parts of circles) |
| arcTo() | 創建兩個切線之間的電弧/曲線 |
| isPointInPath() | 如果指定的點是在當前路徑，則返回true，否則為false |
轉換
| 方法 | 描述 |
|---|---|
| scale() | 縮放當前繪圖大或變小 |
| rotate() | 旋轉當前圖紙 |
| translate() | 重新映射(0,0)的畫布上的位置 |
| transform() | 替換當前變換矩陣為繪圖 |
| setTransform() | 復位電流轉換為單位矩陣。 然後運行transform() |
文本
| 屬性 | 描述 |
|---|---|
| font | 設置或返回文本內容的當前字體屬性 |
| textAlign | 設置或返回文本內容的當前定位 |
| textBaseline | 設置或返回當前文本基線繪製文本時使用 |
| 方法 | 描述 |
|---|---|
| fillText() | 繪製"filled"在畫布上的文字 |
| strokeText() | 繪製在畫布上的文本(no fill) |
| measureText() | 返回包含指定文本的寬度的對象 |
圖像繪製
| 方法 | 描述 |
|---|---|
| drawImage() | 繪製圖像，帆布，或視頻到畫布 |
像素操作
| 屬性 | 描述 |
|---|---|
| width | 返回的ImageData對象的寬度 |
| height | 返回的ImageData對象的高度 |
| data | 返回包含指定的ImageData對象的圖像數據中的對象 |
| 方法 | 描述 |
|---|---|
| createImageData() | 創建一個新的，空白的ImageData對象 |
| getImageData() | 返回的ImageData對象副本在畫布上為指定的矩形的像素數據 |
| putImageData() | 放的圖像數據(from a specified ImageData object)回到畫布 |
合成
| 屬性 | 描述 |
|---|---|
| globalAlpha | 設置或返回附圖的當前α或透明度值 |
| globalCompositeOperation | 新的圖像的繪製到現有的圖像設置或返回 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存當前上下文的狀態 |
| restore() | 返回先前保存的路徑狀態和屬性 |
| createEvent() | |
| getContext() | |
| toDataURL() |
標準屬性和事件
相關頁面
HTML教程： HTML5畫布
HTML參考： HTML <canvas>標籤