Canvas 绘图上下文
Canvas 虽然一直被称之为 画布，当我们千万不要认为它就是现实生活中的一张画布，而是应该理解为 Photoshop 中的图层集合
Canvas 绘图机制
我们先来看一张图
首先使用 translate(x,y) 平移后绘制了一个橘黄色的矩形，然后我们想在距离屏幕左上角 (50，100) 的位置绘制一个蓝色的矩形
可为什么绘制结果竟然是在平移后的坐标系里绘制？
因为对 Canvas 的几何变换是终身生效的，除非再次调用几何变换重新设置
那么假如我们要把原点重新回到 (0,0) 点，然后绘制新的图形呢？
translate(-x,-y) 的慢慢地平移回去？
肯定不是，我们可以在做平移变换之前将当前 canvas 的状态进行保存
Canvas 图层
Canvas 为我们提供了 图层(Layer) 的支持，Layer(图层) 是按 "栈结构" 来进行管理的
当我们调用 save() 方法，会保存当前 Canvas 的状态然后作为一个 Layer(图层)，添加到 Canvas栈 中，
而当我们调用 restore() 方法的时候，会恢复之前 Canvas 的状态，而此时 Canvas 的图层栈
会弹出栈顶的那个 Layer，后继的 Layer 来到栈顶，此时的 Canvas 回复到此栈顶时保存的 Canvas 状态
简单说就是 save() 往栈压入一个 Layer，restore()弹出栈顶的一个Layer，这个 Layer 代表Canvas的 状态！
也就是说可以 save() 多次，也可以 restore() 多次，但是 restore() 的调用次数 不能大于 save() 否则会引发错误
绘制状态
保存到栈中的绘制状态有下面部分组成
-
当前的变换矩阵
-
当前的剪切区域
-
当前的虚线列表
-
以下属性当前的值
strokeStyle fillStyle globalAlpha lineWidth lineCap lineJoin miterLimit lineDashOffset shadowOffsetX shadowOffsetY shadowBlur shadowColor globalCompositeOperation font textAlign textBaseline direction imageSmoothingEnabled
Canvas save() 方法
ctx.save() 方法用于将画布的当前状态保存到栈中
语法
void ctx.save();
范例
下面的代码使用 save() 方法保存默认的状态，然后平移 (100,100) 绘制一个绿色矩形后，恢复之前的状态，最后再使用默认的设置绘制一个矩形
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); ctx.save(); ctx.translate(100,100); ctx.fillStyle = "green" ctx.fillRect(50,50,100,50); ctx.restore(); ctx.fillRect(50,50,100,50); </script>
运行结果如下