HTML <canvas> 標籤

admin發表於2020-03-13

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 屬性設定畫布尺寸一章節。