HTML <canvas> 標籤

HTML5 新增 <canvas> 標籤，為繪製圖片提供了畫布。

但是此標籤本身不具有繪圖能力，而是需要藉助JavaScript實現。

一.新增畫布：

所謂新增 "畫布" 就是在頁面中插入<canvas>標籤。

程式碼片段如下：

[HTML] 純文字檢視 複製程式碼
<canvas id="canvas"  width="400" height="400"></canvas>

上述程式碼在頁面中插入一個長寬分別為400px的畫布。

二.獲取畫布：

<canvas>標籤本身不具有繪製圖片的能力，需要藉助於JavaScript。

所以首先要通過JavaScript獲取<canvas>元素物件。

程式碼片段如下：

[JavaScript] 純文字檢視 複製程式碼
let cvs = document.getElementById("canvas");

通過相關方法獲取<canvas>元素物件，也就是獲取"畫布"。

三.繪圖環境：

現實中繪畫有了畫布，還需要畫筆或者墨水等工具，權且稱這些為繪圖環境。

利用<canvas>會話也是如此，也需要獲取繪圖環境。

程式碼片段如下：

[JavaScript] 純文字檢視 複製程式碼
// 獲取畫布
let cvs = document.getElementById("canvas");
// 獲取繪圖環境
let ctx = cvs.getContext("2d");

通過getContext()方法獲取繪圖環境，它提供了各種繪圖方法和屬性。

特別說明：利用 canvas 繪製的是點陣圖，採用SVG繪製的是向量圖。

四.畫布尺寸：

<canvas>標籤的預設寬度是300px，高度是150px。

可以通過width和height屬性設定<canvas>標籤的尺寸，也就是畫布的尺寸。

也可以利用CSS設定<canvas>的尺寸，但是兩者區別巨大。

具體可以參閱CSS與 canvas 屬性設定畫布尺寸一章節。