HTML DOM Canvas 對象

<canvas> 元素定義 HTML 頁面中的位圖區域。

Canvas API 允許 JavaScript 在畫布上繪制圖形。

Canvas API 可以繪制形狀、線條、曲線、方框、文本和圖像，以及顏色、旋轉、透明度和其他像素操作。

將 Canvas 添加到 HTML

您可以使用 <canvas> 標簽在 HTML 頁面中的任意位置添加 canvas 元素：

實例

<canvas id="myCanvas" width="300" height="150"></canvas>

親自試一試

如何訪問 Canvas 元素

您可以使用 HTML DOM 方法 getElementById() 訪問 <canvas> 元素：

const myCanvas = document.getElementById("myCanvas");

如需在畫布上繪圖，您需要創建 2D 上下文對象：

const ctx = myCanvas.getContext("2d");

筆記

HTML <canvas> 元素本身沒有繪圖功能。

您必須使用 JavaScript 來繪制任何圖形。

getContext() 方法返回一個帶有繪圖工具（方法）的對象。

在畫布上繪圖

創建 2D 上下文對象之后，您就可以在畫布上繪圖了。

下面的 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);

親自試一試

路徑

在畫布上繪圖的常見方法是：

1. 開始路徑 - beginPath()
2. 移動到一個點 - moveTo()
3. 在路徑中繪制 - lineTo()
4. 繪制路徑 - 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();

親自試一試