HTML Canvas 參考
<canvas> 元素在 HTML 頁面中定義了一個點陣圖區域。
Canvas API 允許 JavaScript 在 canvas 上繪製圖形。
Canvas API 可以繪製形狀、線條、曲線、方框、文字和影像，並帶有顏色、旋轉、透明度以及其他畫素操作。
您可以使用 <canvas> 標籤將 canvas 元素新增到 HTML 頁面的任何位置
您可以使用 **HTML DOM** 方法 getElementById() 來訪問 <canvas> 元素。
要在 canvas 中繪圖，您需要建立一個 2D 上下文物件
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
注意
HTML <canvas> 元素本身沒有繪圖能力。
您必須使用 JavaScript 來繪製任何圖形。
getContext() 方法返回一個帶有繪圖工具（方法）的物件。
在 Canvas 上繪圖
建立 2D 上下文後，您就可以在 canvas 上進行繪圖了。
fillRect() 方法會繪製一個黑色矩形，其左上角位於 20,20 位置。該矩形的寬度為 150 畫素，高度為 100 畫素。
示例
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);
自己動手試一試 »
使用顏色
fillStyle 屬性設定繪圖物件的填充顏色
示例
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
自己動手試一試 »
您還可以使用 document.createElement() 方法建立一個新的 <canvas> 元素，然後將該元素新增到現有 HTML 頁面中
示例
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
自己動手試一試 »
路徑
在 canvas 上繪圖的常用方法是
- 開始路徑 - beginPath()
- 移動到某個點 - moveTo()
- 在路徑中繪製 - lineTo()
- 繪製路徑 - stroke()
示例
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();
自己動手試一試 »
Canvas API 完整參考
本參考涵蓋了 getContext("2d") 物件的所有屬性和方法，用於在 canvas 上繪製文字、線條、方框、圓形、圖片等。
繪圖方法
直接在 canvas 上繪圖的方法只有 3 個
| 方法 | 描述 |
|---|---|
| fillRect() | 繪製一個“填充”矩形 |
| strokeRect() | 繪製一個矩形（無填充） |
| clearRect() | 清除矩形內指定的畫素 |
路徑方法
| 方法 | 描述 |
|---|---|
| beginPath() | 開始新路徑或重置當前路徑 |
| closePath() | 從當前點到起始點新增一條線到路徑 |
| isPointInPath() | 如果指定點在當前路徑中，則返回 true |
| moveTo() | 將路徑移動到 canvas 中的某個點（不繪製） |
| lineTo() | 向路徑新增一條線 |
| fill() | 填充當前路徑 |
| rect() | 向路徑新增一個矩形 |
| stroke() | 繪製當前路徑 |
| 圓形和曲線 | |
| bezierCurveTo() | 向路徑新增一條三次貝塞爾曲線 |
| arc() | 向路徑新增一條弧線/曲線（圓形或圓形的一部分） |
| arcTo() | 在兩條切線之間向路徑新增一條弧線/曲線 |
| quadraticCurveTo() | 向路徑新增一條二次貝塞爾曲線 |
文字
| 方法/屬性 | 描述 |
|---|---|
| direction | 設定或返回用於繪製文字的方向 |
| fillText() | 在 canvas 上繪製“填充”文字 |
| font | 設定或返回文字內容的字型屬性 |
| measureText() | 返回一個包含指定文字寬度的物件 |
| strokeText() | 在 canvas 上繪製文字 |
| textAlign | 設定或返回文字內容的對齊方式 |
| textBaseline | 設定或返回繪製文字時使用的文字基線 |
顏色、樣式和陰影
| 方法/屬性 | 描述 |
|---|---|
| addColorStop() | 指定漸變物件中的顏色和停止位置 |
| createLinearGradient() | 建立一個線性漸變（用於 canvas 內容） |
| createPattern() | 在指定方向重複指定元素 |
| createRadialGradient() | 建立一個徑向/圓形漸變（用於 canvas 內容） |
| fillStyle | 設定或返回用於填充繪圖的顏色、漸變或圖案 |
| lineCap | 設定或返回線條末端帽的樣式 |
| lineJoin | 設定或返回兩條線相交時建立的角的型別 |
| lineWidth | 設定或返回當前線寬 |
| miterLimit | 設定或返回最大斜接長度 |
| shadowBlur | 設定或返回陰影的模糊級別 |
| shadowColor | 設定或返回用於陰影的顏色 |
| shadowOffsetX | 設定或返回陰影與形狀的水平距離 |
| shadowOffsetY | 設定或返回陰影與形狀的垂直距離 |
| strokeStyle | 設定或返回用於描邊的顏色、漸變或圖案 |
變換
| 方法 | 描述 |
|---|---|
| scale() | 放大或縮小當前繪圖 |
| rotate() | 旋轉當前繪圖 |
| translate() | 重新對映 canvas 上的 (0,0) 位置 |
| transform() | 替換繪圖的當前變換矩陣 |
| setTransform() | 將當前變換重置為單位矩陣。然後執行 transform() |
影像繪製
| 方法 | 描述 |
|---|---|
| drawImage() | 將影像、canvas 或影片繪製到 canvas 上 |
ImageData 物件 / 畫素操作
| 方法/屬性 | 描述 |
|---|---|
| createImageData() | 建立一個新的空白 ImageData 物件 |
| getImageData() | 返回一個 ImageData 物件，該物件複製 canvas 上指定矩形的畫素資料 |
| ImageData.data | 返回一個包含指定 ImageData 物件的影像資料的物件 |
| ImageData.height | 返回 ImageData 物件的高度 |
| ImageData.width | 返回 ImageData 物件的寬度 |
| putImageData() | 將影像資料（來自指定的 ImageData 物件）重新放置到 canvas 上 |
合成
| 屬性 | 描述 |
|---|---|
| globalAlpha | 設定或返回繪圖的當前 alpha 或透明度值 |
| globalCompositeOperation | 設定或返回新影像如何繪製到現有影像上 |
其他方法
| 方法 | 描述 |
|---|---|
| clip() | 從原始 canvas 中剪裁出任何形狀和大小的區域 |
| save() | 儲存當前繪圖上下文及其所有屬性的狀態 |
| restore() | 恢復之前儲存的狀態和屬性 |
| createEvent() | |
| getContext() | |
| toDataURL() |
標準屬性和事件
相關頁面
Canvas 教程：Canvas 教程
HTML 教程：HTML5 Canvas
HTML 參考：HTML <canvas> 標籤
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
Canvas API 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
