<canvas> 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成

例如一个画布

<canvas id="canvas-1" style="border:1px solid green"></canvas>

我们必须先通过 document.getElementById("canvas-1") 来获得这个 <canvas> 元素

渲染上下文

<canvas> 起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制

怎么理解这个渲染上下文呢？

就像一块画板，它就静静地躺在哪里，没有人，就不能画画，所以这个渲染上下文就相当于现实中绘画的人

我们都知道现实总绘画有很多流派，比如油画，素描，写实....

在 <canvas> 的世界，也有两大流派，一个是 2d 就是平面绘图，一个是 webgl 也就是 3D 立体绘图

因为 webgl 还未完全被主流的浏览器所支持，所以我们一般使用 2d 绘图

获取 2d 渲染上下文

<canvas> 元素有一个叫做 getContext() 的方法

canvas.getContext(contextType, contextAttributes);

这个方法是用来获得渲染上下文和它的绘画功能

对于 2d 图像而言，可以使用下面的代码获取渲染上下文

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx 现在 CanvasRenderingContext2D 的一个实例

现在已经获取到了 2D 画布的渲染上下文，可以使用它画你想画的了

对了，接下来的教程，渲染上下文(ctx) 就是表示使用 canvas.getContext('2d');