HTML Canvas 教程

HTML <canvas> 元素用于在網頁上繪制圖形。

上面的圖形是用 <canvas> 創建的。

它顯示了四個元素：紅色矩形、漸變矩形、多色矩形和多色文本。

什么是 HTML Canvas？

HTML <canvas> 元素用于通過腳本（通常是 JavaScript）動態地繪制圖形。

<canvas> 元素只是圖形的容器。您必須使用腳本來繪制實際的圖形。

Canvas 有多種方法用于繪制路徑、方框、圓形、文本和添加圖像。

HTML Canvas 可以繪制文本

Canvas 可以繪制彩色文本，還可帶動畫效果。

HTML Canvas 可以繪制圖形

Canvas 擁有使用圖形和圖表進行圖形化數據呈現的強大能力。

HTML Canvas 可以動畫化

Canvas 對象可以移動。一切皆有可能：從簡單的彈跳球到復雜的動畫。

HTML Canvas 可以交互

Canvas 可以響應 JavaScript 事件。

Canvas 可以響應任何用戶操作（按鍵單擊、鼠標單擊、按鈕單擊、手指移動）。

HTML Canvas 可用于游戲

Canvas 的動畫方法為 HTML 游戲應用程序提供了很多可能性。

Canvas Example

在 HTML 中，<canvas> 元素看起來是這樣的：

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas> 元素必須有 id 屬性，以便 JavaScript 可以引用它。

width 和 height 屬性對于定義畫布的大小也是必需的。

提示：一張 HTML 頁面上可以有多個 <canvas> 元素。

默認情況下，<canvas> 元素沒有邊框，也沒有內容。

如需添加邊框，請使用 style 屬性：

實例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

親自試一試

接下來的章節將介紹如何在畫布上繪圖。

另請參閱：

CodeW3C.com 的完整 Canvas 參考手冊

瀏覽器支持

<canvas> 元素是 HTML5 標準 (2014)。

所有現代瀏覽器都支持 <canvas>：