1. 基本概念
绘图上下文包括：当前坐标系统变换信息(The current transformation matrix)、当前剪辑区域(clipping oregion)、绘图/画笔属性，如: 线条颜色(stroke)、填充色(fillstyle)、透明度(globalAlpha)等，learn more；
2. 暂存/恢复上下文
使用Canvas绘图过程中，有时候需要暂存绘图上下文信息，此时可以用到save方法来暂存当前绘图状态(入栈)，使用restore方法来恢复之前暂存的绘图状态(出栈)。
- 源码
this.ctx.strokeStyle = "#ff0000";
this.ctx.save(); // 栈1 - 红色
this.ctx.strokeStyle = "#0000ff";
this.ctx.save(); // 栈2 - 蓝色
// 左侧图形（略...）
this.ctx.restore(); // 栈2 - 蓝色
this.ctx.stroke();
// 右侧图形（略...）
this.ctx.restore(); // 栈1 - 红色
this.ctx.stroke();
2
3
4
5
6
7
8
9
10
11
12
13
3. 当前绘图路径
绘制图形时，我们需要通过绘制路径来实现；路径又由不同的颜色和宽度的线条所组成。使用路径绘制需要如下步骤：
- 创建路径起始点
- 使用画图命令画出路径
- 把路径封闭
- 通过描边和填充路径区域来渲染图形
3.2 closePath
canvas上下文(context)维护一个当前路径。我们可以通过画图命令如：(moveTo、lineTo)来描述路径，closePath同moveTo这些画图命令属于同一类，它是用来告诉路径是否需要闭合(closePath只对stroke生效，对fill无效)。
WARNING
注意观察，左侧线段ABC与右侧线段ABC粗线/颜色深度略有不同。这是因为左侧线段ABC画了两遍。下面的beginPath可以解决这个问题。
3.1 beginPath
beginPath用来创建一个当前路径(starts a new path by emptying the list of sub-paths)，上例中没有使用beginPath的时候，左右两部分图形是在同一个路径中进行绘制的，每一次调用stroke时，都会将当前路径上的图形绘制到canvas上，所以左侧线段ABC看上去比右侧线段ABC要粗且颜色较深。
TIP
为了便于理解，这里打个比方。当我们每次打算在画布(canvas)上画图形时，都需要先在一张草稿纸上进行，这张草稿纸可以看做当前路径，我们通过设置好画笔颜色(strokeStyle)、画笔粗细(lineWidth)、图形路径(moveTo/lineTo)等信息，最终通过stroke/fill将草稿纸上的内容绘制到canvas上。beginPath的作用在于丢弃之前的草稿纸且重新创建了一张草稿纸