Canvas之状态存储与重置
ctx.save();
ctx.translate(100, 100)
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
// ctx.translate(-100, -100)
ctx.restore();
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.fillRect(0, 0, 100, 100);
我们在使用多种样式绘制图形时，有时需要回到之前的样式去进行设置，因为样式的设置有时是一层套一层的。如果我们使用手动的方式去重新调整样式。但这种方式不好。
第一，可读性，可维护性，可扩展性不好，因为需要重新设置大量的样式。
第二，当前面的状态改变之后，后面的状态不能统一改变。
每次在调用 ctx.save() 方法时，都会将它们存入一个栈中，存入的是当前的状态，也就是 ctx.save() 之前的状态。栈的特点是后进先出。所以当使用 ctx.restore() 时会先恢复到前一个状态。可以使用多个 ctx.save() 来将多种状态存入栈中，然后根据实际的编码或者设计习惯来进行取舍。
除了绘制图形之外，其余的绘制状态 ctx.save() 都可以进行保存。比如：描边，填充，线条，文本样式，裁剪，合成，图像变换。
在使用 ctx.save() 之后，一般在结尾会加上 ctx.restore() 回到初始状态，使得下一次的绘制不会收到上一次的影响。同时还会加上 ctx.beginPath() 来保证样式之间不进行相互影响。
