## 第一节：概述 `<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 的立体图案。