HTML5 <canvas> 參考手冊
描述
HTML5 <獲得用於在畫布上繪圖的對象獲得用於在畫布上繪圖的對象> 標籤用於繪製圖像（通過腳本，通常是 JavaScript）。
不過，<canvas> 元素本身並沒有繪製能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。
getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。
本手冊提供完整的 getContext("2d") 對象的屬性和方法，可用於在畫布上繪製文本、線條、矩形、圓形等等。
瀏覽器支持
![]( "Internet Explorer")
![]( "Firefox")
![]( "Opera")
![]( "Google Chrome")
![]( "Safari")
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 標籤的屬性及方法。
注意:Internet Explorer 8 及更早的IE版本不支持 <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() | 創建三次貝塞爾曲線。 |
| arc() | 創建弧/曲線（用於創建圓形或部分圓）。 |
| arcTo() | 創建兩切線之間的弧/曲線。 |
| isPointInPath() | 如果指定的點位於當前路徑中，則返回 true，否則返回 false。 |
轉換
| 方法 | 描述 |
|---|
| scale() | 縮放當前繪圖至更大或更小。 |
| rotate() | 旋轉當前繪圖。 |
| translate() | 重新映射畫布上的 (0,0) 位置。 |
| transform() | 替換繪圖的當前轉換矩陣。 |
| setTransform() | 將當前轉換重置爲單位矩陣。然後運行 transform()。 |
文本
| 屬性 | 描述 |
|---|
| 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() | 創建新的 Event 對象 |
| getContext() | 獲得用於在畫布上繪圖的對象 |
| toDataURL() | 導出在 canvas 元素上繪製的圖像 |
HTML 顏色名
目前所有瀏覽器都支持以下顏色名。
141個顏色名稱是在HTML和CSS顏色規範定義的（17標準顏色，再加124）。下表列出了所有顏色的值，包括十六進制值。
![]()
提示: 17標準顏色：黑色，藍色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍綠色，黃色。點擊其中一個顏色名稱（或一個十六進制值）就可以查看與不同文字顏色搭配的背景顏色。：
按顏色名排序
按十六進制的值排序
單擊一個顏色名或者 16 進制值，就可以查看與不同文字顏色搭配的背景顏色。
| Color Name | HEX | Color |
|---|
| AliceBlue | #F0F8FF |
|
| AntiqueWhite | #FAEBD7 |
|
| Aqua | #00FFFF |
|
| Aquamarine | #7FFFD4 |
|
| Azure | #F0FFFF |
|
| Beige | #F5F5DC |
|
| Bisque | #FFE4C4 |
|
| Black | #000000 |
|
| BlanchedAlmond | #FFEBCD |
|
| Blue | #0000FF |
|
| BlueViolet | #8A2BE2 |
|
| Brown | #A52A2A |
|
| BurlyWood | #DEB887 |
|
| CadetBlue | #5F9EA0 |
|
| Chartreuse | #7FFF00 |
|
| Chocolate | #D2691E |
|
| Coral | #FF7F50 |
|
| CornflowerBlue | #6495ED |
|
| Cornsilk | #FFF8DC |
|
| Crimson | #DC143C |
|
| Cyan | #00FFFF |
|
| DarkBlue | #00008B |
|
| DarkCyan | #008B8B |
|
| DarkGoldenRod | #B8860B |
|
| DarkGray | #A9A9A9 |
|
| DarkGreen | #006400 |
|
| DarkKhaki | #BDB76B |
|
| DarkMagenta | #8B008B |
|
| DarkOliveGreen | #556B2F |
|
| DarkOrange | #FF8C00 |
|
| DarkOrchid | #9932CC |
|
| DarkRed | #8B0000 |
|
| DarkSalmon | #E9967A |
|
| DarkSeaGreen | #8FBC8F |
|
| DarkSlateBlue | #483D8B |
|
| DarkSlateGray | #2F4F4F |
|
| DarkTurquoise | #00CED1 |
|
| DarkViolet | #9400D3 |
|
| DeepPink | #FF1493 |
|
| DeepSkyBlue | #00BFFF |
|
| DimGray | #696969 |
|
| DodgerBlue | #1E90FF |
|
| FireBrick | #B22222 |
|
| FloralWhite | #FFFAF0 |
|
| ForestGreen | #228B22 |
|
| Fuchsia | #FF00FF |
|
| Gainsboro | #DCDCDC |
|
| GhostWhite | #F8F8FF |
|
| Gold | #FFD700 |
|
| GoldenRod | #DAA520 |
|
| Gray | #808080 |
|
| Green | #008000 |
|
| GreenYellow | #ADFF2F |
|
| HoneyDew | #F0FFF0 |
|
| HotPink | #FF69B4 |
|
| IndianRed | #CD5C5C |
|
| Indigo | #4B0082 |
|
| Ivory | #FFFFF0 |
|
| Khaki | #F0E68C |
|
| Lavender | #E6E6FA |
|
| LavenderBlush | #FFF0F5 |
|
| LawnGreen | #7CFC00 |
|
| LemonChiffon | #FFFACD |
|
| LightBlue | #ADD8E6 |
|
| LightCoral | #F08080 |
|
| LightCyan | #E0FFFF |
|
| LightGoldenRodYellow | #FAFAD2 |
|
| LightGray | #D3D3D3 |
|
| LightGreen | #90EE90 |
|
| LightPink | #FFB6C1 |
|
| LightSalmon | #FFA07A |
|
| LightSeaGreen | #20B2AA |
|
| LightSkyBlue | #87CEFA |
|
| LightSlateGray | #778899 |
|
| LightSteelBlue | #B0C4DE |
|
| LightYellow | #FFFFE0 |
|
| Lime | #00FF00 |
|
| LimeGreen | #32CD32 |
|
| Linen | #FAF0E6 |
|
| Magenta | #FF00FF |
|
| Maroon | #800000 |
|
| MediumAquaMarine | #66CDAA |
|
| MediumBlue | #0000CD |
|
| MediumOrchid | #BA55D3 |
|
| MediumPurple | #9370DB |
|
| MediumSeaGreen | #3CB371 |
|
| MediumSlateBlue | #7B68EE |
|
| MediumSpringGreen | #00FA9A |
|
| MediumTurquoise | #48D1CC |
|
| MediumVioletRed | #C71585 |
|
| MidnightBlue | #191970 |
|
| MintCream | #F5FFFA |
|
| MistyRose | #FFE4E1 |
|
| Moccasin | #FFE4B5 |
|
| NavajoWhite | #FFDEAD |
|
| Navy | #000080 |
|
| OldLace | #FDF5E6 |
|
| Olive | #808000 |
|
| OliveDrab | #6B8E23 |
|
| Orange | #FFA500 |
|
| OrangeRed | #FF4500 |
|
| Orchid | #DA70D6 |
|
| PaleGoldenRod | #EEE8AA |
|
| PaleGreen | #98FB98 |
|
| PaleTurquoise | #AFEEEE |
|
| PaleVioletRed | #DB7093 |
|
| PapayaWhip | #FFEFD5 |
|
| PeachPuff | #FFDAB9 |
|
| Peru | #CD853F |
|
| Pink | #FFC0CB |
|
| Plum | #DDA0DD |
|
| PowderBlue | #B0E0E6 |
|
| Purple | #800080 |
|
| Red | #FF0000 |
|
| RosyBrown | #BC8F8F |
|
| RoyalBlue | #4169E1 |
|
| SaddleBrown | #8B4513 |
|
| Salmon | #FA8072 |
|
| SandyBrown | #F4A460 |
|
| SeaGreen | #2E8B57 |
|
| SeaShell | #FFF5EE |
|
| Sienna | #A0522D |
|
| Silver | #C0C0C0 |
|
| SkyBlue | #87CEEB |
|
| SlateBlue | #6A5ACD |
|
| SlateGray | #708090 |
|
| Snow | #FFFAFA |
|
| SpringGreen | #00FF7F |
|
| SteelBlue | #4682B4 |
|
| Tan | #D2B48C |
|
| Teal | #008080 |
|
| Thistle | #D8BFD8 |
|
| Tomato | #FF6347 |
|
| Turquoise | #40E0D0 |
|
| Violet | #EE82EE |
|
| Wheat | #F5DEB3 |
|
| White | #FFFFFF |
|
| WhiteSmoke | #F5F5F5 |
|
| Yellow | #FFFF00 |
|
| YellowGreen | #9ACD32 |
|
