HTML Canvas 教程
HTML <canvas> 元素用於在網頁上繪製圖形。
HTML <canvas> 元素只是一個圖形容器。您必須使用指令碼來實際繪製圖形。
Canvas 提供了多種方法來繪製路徑、框、圓形、文字和新增影像。
Canvas 受所有主要瀏覽器支援。
HTML Canvas 示例
上面的圖形是用 <canvas> 建立的。它包含四個物件：一個紅色矩形、一個漸變矩形、一個多色矩形和一個多色文字。
您應該已經知道
在繼續之前，您應該對以下內容有基本瞭解
- HTML
- 基礎 JavaScript
如果您想先學習這些主題，請在我們首頁上查詢教程。
什麼是 HTML Canvas？
HTML <canvas> 元素透過指令碼（通常是 JavaScript）即時繪製圖形。
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas 提供了多種方法來繪製路徑、框、圓形、文字和新增影像。
HTML Canvas 可以繪製文字
Canvas 可以繪製彩色文字，可以帶動畫也可以不帶動畫。
HTML Canvas 可以繪製圖形
Canvas 擁有強大的功能，可用於圖形資料視覺化，如繪製圖表和圖形。
HTML Canvas 可以製作動畫
Canvas 物件可以移動。一切皆有可能：從簡單的彈跳球到複雜的動畫。
HTML Canvas 可以互動
Canvas 可以響應 JavaScript 事件。
Canvas 可以響應任何使用者操作（鍵盤點選、滑鼠點選、按鈕點選、手指滑動）。
HTML Canvas 可用於遊戲
Canvas 的動畫方法為 HTML 遊戲應用程式提供了許多可能性。
Canvas 示例
在 HTML 中，<canvas> 元素看起來像這樣
<canvas id="myCanvas" width="200" height="100"></canvas>
id 屬性是必需的（以便 JavaScript 可以引用它）。
width 和 height 屬性定義了畫布的大小。
提示: 畫布的預設大小是 300px（寬度）x 150px（高度）。
提示: 您可以在一個 HTML 頁面上放置多個 <canvas> 元素。
預設情況下，<canvas> 元素沒有邊框和內容。
要新增邊框，請使用 style 屬性
示例
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
自己動手試一試 »
接下來的章節將展示如何在畫布上繪圖。
