( Day 28.1 ) HTML 點陣畫布 <canvas>

2023 iThome 鐵人賽

DAY 28

Modern Web

跟著 OXXO 一起學 HTML系列第 71 篇

15th鐵人賽 html html教學

oxxo

2023-09-28 09:29:17

436 瀏覽

分享至

<canvas> 點陣畫布元素是 HTML 裡使用「像素」繪製圖案的元素，許多遊戲畫面、動態圖形或 3D 圖形渲染，都會使用 <canvas> 進行處理，使用上必須搭配 JavaScript 實作，這篇教學會簡單介紹 <canvas> 點陣畫布元素。

原文參考：點陣畫布 canvas

認識 `<canvas>`

<canvas> 點陣畫布元素是 HTML 裡使用「像素」繪製圖案的元素，許多遊戲畫面、動態圖形或 3D 圖形渲染，都會使用 <canvas> 進行處理，使用上必須搭配 JavaScript 實作。

<canvas> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，放在標籤裡的內容不會顯示。

例如下方的 HTML 開啟後，會在網頁中放入一個 <canvas>，並透過 JavaScript 在上面繪製一個紅色的長方形。

<canvas id="myCanvas" style="border:1px solid #000;"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(10, 10, 150, 75);
</script>

HTML 教學 - 點陣畫布 - 認識

`<canvas>` 支援屬性

<canvas> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，也支援下方兩個屬性：

屬性	說明
width	畫布寬度，單位像素 px。
height	畫布高度，單位像素 px。

下方的 HTML 開啟後，會透過 style 屬性設定將 <canvas> 加上邊框 ( 內容是一個紅色正方形 )。

<canvas id="myCanvas" style="border:1px solid #000;"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(10, 10, 150, 75);
</script>

HTML 教學 - 點陣畫布 - 認識