HTML <canvas> 標籤
示例
即時繪製一個紅色矩形，並將其顯示在 <canvas> 元素內
<canvas id="myCanvas">
您的瀏覽器不支援 canvas 標籤。
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<canvas> 標籤用於透過指令碼（通常是 JavaScript）即時繪製圖形。
<canvas> 標籤是透明的，它只是圖形的容器，您必須使用指令碼來實際繪製圖形。
<canvas> 元素內的任何文字都將顯示在停用 JavaScript 的瀏覽器和不支援 <canvas> 的瀏覽器中。
提示和註釋
提示: 在我們的 HTML Canvas 教程中瞭解更多關於 <canvas> 元素的資訊。
提示: 有關所有屬性和方法的完整參考，請訪問我們的 HTML Canvas 參考手冊。
瀏覽器支援
表格中的數字表示完全支援該元素的首個瀏覽器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
屬性
| Attribute | 值 | 描述 |
|---|---|---|
| height | 畫素 | 指定畫布的高度。預設值為 150 |
| width | 畫素 | 指定畫布的寬度。預設值為 300 |
全域性屬性
<canvas> 標籤還支援 HTML 中的全域性屬性。
事件屬性
<canvas> 標籤還支援 HTML 中的事件屬性。
更多示例
示例
另一個 <canvas> 示例
<canvas id="myCanvas">
您的瀏覽器不支援 canvas 標籤。
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//開啟透明度
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
自己動手試一試 »
預設 CSS 設定
大多數瀏覽器將以以下預設值顯示 <canvas> 元素
