canvas教程(一) 簡介

什麼是 canvas

按例是要介紹一下 canvas 的，在沒有 canvas 以前，咱們爲了網頁的效果，不少狀況下是使用了圖片來實現，不過用圖片就須要加載，並且圖片的體積也是一個問題，因此在 html5 的規範裏新增了一個 canvas 元素（畫布）

那麼其實在 html5 中有兩個 2d 圖形技術，還有一個是叫 svg，而它們的區別就在於：

1. canvas 是由 js 動態生成的，svg 是使用 xml 靜態描述的
2. 每次修改，canvas 須要重繪，svg 不須要
3. canvas 是「位圖」，適用於像素處理和動態渲染，圖形放大會影響質量，而 svg 是「矢量」，圖形放大不會影響質量。

這兩種技術都各有千秋，適用於不一樣的場合，咱們能夠根據開發場景來選擇，這裏就很少介紹了。

canvas 元素的知識

canvas 是一個行內塊元素，它默認是寬度 300px 和高度 150px，能夠使用 html 屬性和 js 定義寬高。

⚠️ 假如是用 css 定義寬高，在使用 js 獲取 canvas 的寬高依然會是其默認值

使用 canvas 繪製圖形，須要三步

1. 獲取 canvas 對象
2. 獲取上下文環境對象 context
3. 繪製圖形

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 封裝的，感興趣的均可以去相關的官網上學習。

結束

好了，本次的教程就到這裏結束了，下次將爲你們帶來直線相關的繪製