搞懂 ctx.restore();ctx.save()；ctx.beginPath();

在做canvas时钟时，ctx.restore();ctx.save()；ctx.beginPath();反复用到！

那么，这几个函数到底是什么功能呢?有什么区别和联系呢？

1.beginPath()

w3c上的解释：beginPath() 方法在一个画布中开始子路径的一个新的集合。

也就是说，运行到这个函数时，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新的路径。

2. ctx.restore()

W3C的解释是：

restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。

3.ctx.save()

W3C的解释是：

保存当前图像状态的一份拷贝。

那么可以看出：save()和restore()的区别在于：

save()把当前状态推入到绘图堆栈中，而restore()从绘图堆栈中的顶端弹出最近保存的状态，并且根据这些存储的值来设置当前绘图状态。

废话再说一遍：save()主要用来保存目前Canvas的状态。通过save()函数它会将目前Canvas的状态推到绘图堆栈中。

                         restore()是从绘图堆栈中弹出上一个Canvas的状态。