什麼是 canvas 按例是要介紹一下 canvas 的，在沒有 canvas 之前，我們為了網頁的效果，很多情況下是使用了圖片來實現，不過用圖片就需要載入，而且圖片的體積也是一個問題，所以在 html5 的規範里新增了一個 canvas 元素（畫布） 那麼其實在 html5 中有兩個 2d 圖形技 ...
什麼是 canvas
按例是要介紹一下 canvas 的，在沒有 canvas 之前，我們為了網頁的效果，很多情況下是使用了圖片來實現，不過用圖片就需要載入，而且圖片的體積也是一個問題，所以在 html5 的規範里新增了一個 canvas 元素（畫布）
那麼其實在 html5 中有兩個 2d 圖形技術，還有一個是叫 svg，而它們的區別就在於：
- canvas 是由 js 動態生成的，svg 是使用 xml 靜態描述的
- 每次修改，canvas 需要重繪，svg 不需要
- canvas 是“點陣圖”，適用於像素處理和動態渲染，圖形放大會影響質量，而 svg 是“矢量”，圖形放大不會影響質量。
這兩種技術都各有千秋，適用於不同的場合，我們可以根據開發場景來選擇，這裡就不多介紹了。
canvas 元素的知識
canvas 是一個行內塊元素，它預設是寬度 300px 和高度 150px，可以使用 html 屬性和 js 定義寬高。
⚠️ 假如是用 css 定義寬高，在使用 js 獲取 canvas 的寬高依然會是其預設值
使用 canvas 繪製圖形，需要三步
- 獲取 canvas 對象
- 獲取上下文環境對象 context
- 繪製圖形
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');而我們以後所學習到的 api 和屬性都是 context 對象的。
那麼到這裡有眼力好的同學就能看到了 getContext 方法的參數是 2d，那是不是有 3d？
其實 html5 的 canvas 暫時只提供了 2d，想在 html 使用 3d 的同學可以學習一下 webgl，webgl 其實難度也有點大，也許可以嘗試一下 threejs，因為 threejs 是基於 webgl 封裝的，感興趣的都可以去相關的官網上學習。
結束
好了，本次的教程就到這裡結束了，下次將為大家帶來直線相關的繪製
