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 屬性設定畫布尺寸一章節。
相關文章
- HTML5的canvas標籤HTMLCanvas
- HTML <a> 標籤HTML
- HTML 標籤HTML
- HTML 標籤HTML
- html標籤HTML
- HTML標籤(基本標籤的使用)HTML
- HTML <var> 標籤HTML
- HTML <article> 標籤HTML
- HTML <section> 標籤HTML
- HTML <main> 標籤HTMLAI
- HTML <time> 標籤HTML
- html標籤整理HTML
- HTML <footer> 標籤HTML
- HTML <nav> 標籤HTML
- HTML <body>標籤HTML
- HTML <meta>標籤HTML
- html基本標籤HTML
- HTML <iframe>標籤HTML
- HTML <span>標籤HTML
- HTML 常用標籤HTML
- HTML常用標籤HTML
- HTML <div>標籤HTML
- html標籤使用HTML
- HTML標籤(1)HTML
- html列表標籤HTML
- HTML標籤(2)HTML
- HTML標籤(3)HTML
- html meta標籤HTML
- HTML DOCTYPE 標籤HTML
- html排版標籤HTML
- 01 HTML標籤HTML
- html中常用的標籤-表格標籤HTML
- HTML標記之a標籤HTML
- html中常用的標籤-表單標籤HTML
- HTML20_HTML標籤3HTML
- canvas標籤簡單介紹Canvas
- canvas標籤clock(時鐘)案例Canvas
- html的基本標籤HTML