canvas 使用save restore方法

save() 是将当前状态放入栈中，保存 canvas 全部状态。
restore() 将 canvas 恢复到最近的保存状态。
注意：save restore 成对使用

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.fillStyle = "#ddd";
context.fillRect(0,0,400,400);

context.save();//状态保存
context.translate(100,100);//状态位移
context.fillStyle="red";
context.fillRect(0,0,100,100);
context.restore();//状态恢复

context.save();
context.translate(200,200);
context.fillStyle="green";
context.fillRect(0,0,100,100);
context.restore();

若不使用save restore方法，则translate将会叠加，

context.translate(100,100);//状态位移
context.fillStyle="red";
context.fillRect(0,0,100,100);
 
context.translate(200,200);
context.fillStyle="green";
context.fillRect(0,0,100,100);

​​​​​​​​​​​​​​