## 第一節：概述 `<canvas>`元素用于生成圖像。它本身就像一個畫布，JavaScript 通過操作它的 API，在上面生成圖像。它的底層是一個個像素，基本上`<canvas>`是一個可以用 JavaScript 操作的位圖（bitmap）。 使用 Canvas API 之前，需要在網頁里面新建一個`<canvas>`元素。 ~~~ <canvas id="myCanvas" width="400" height="250"> 您的瀏覽器不支持 Canvas </canvas> ~~~ 如果瀏覽器不支持這個 API，就會顯示`<canvas>`標簽中間的文字：“您的瀏覽器不支持 Canvas”。 每個 Canvas 對象元素存在著一個默認的寬高，寬度為 300px，高度為 150px。 * 通過 HTML 屬性設置寬高，會調整畫布的大小。 * 通過樣式來設置寬和高，設置一條邊的時候，另外一條邊會進行保持縱橫比的等比縮放。如果同時設置兩條邊，畫布會在原來默認寬高的基礎上，拉伸畫布，而不是等比縮放。 * 通過 JS 設置對象寬高屬性，如果直接設置`canvas`對象的`width`和`height`屬性，那么就是設置的畫布的大小（沒有拉伸），如果是設置`canvas`對象中`style`屬性的`width`和`height`屬性，那么畫布就會進行拉伸放大。 每個`<canvas>`元素都有一個對應的`CanvasRenderingContext2D`對象（上下文對象）。Canvas API 就定義在這個對象上面。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ~~~ 上面代碼中，`<canvas>`元素節點對象的`getContext()`方法，返回的就是`CanvasRenderingContext2D`對象。 注意，Canvas API 需要`getContext`方法指定參數`2d`，表示該`<canvas>`節點生成 2D 的平面圖像。如果參數是`webgl`，就表示用于生成 3D 的立體圖案。