HTML Canvas 上的繪圖
使用 JavaScript 在 Canvas 上繪圖
Canvas 上的繪圖是透過 JavaScript 完成的。
Canvas 最初是空白的。要顯示內容，需要一個指令碼來訪問渲染上下文並在其上進行繪製。
以下示例在 Canvas 上繪製一個紅色矩形，從位置 (0,0) 開始，寬度為 150，高度為 75
示例
<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;">
</canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 75);
</script>
自己動手試一試 »
步驟 1：查詢 Canvas 元素
首先，您必須找到 <canvas> 元素。
您可以使用 HTML DOM 方法 getElementById() 來訪問 <canvas> 元素。
const canvas = document.getElementById("myCanvas");
步驟 2：建立繪圖物件
其次，您需要一個用於 Canvas 的繪圖物件。
getContext() 方法返回一個包含繪圖工具（屬性和方法）的物件。
const ctx = canvas.getContext("2d");
步驟 3：在 Canvas 上繪圖
最後，您可以在 Canvas 上繪圖。
使用 fillStyle 屬性將填充顏色設定為紅色。
ctx.fillStyle = "red";
fillStyle 屬性可以是顏色、漸變或圖案。預設的 fillStyle 是黑色。
fillRect(x, y, width, height) 方法使用填充樣式顏色在 Canvas 上繪製矩形。
ctx.fillRect(0, 0, 150, 75);
