canvas的save与restore方法的作用

网上搜罗了一堆资料，最后总结一下。

save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作，所以如果不对canvas进行save以及restore，那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。比如说你相对于起始点每次30度递增旋转，30，60，90.如果不使用save 以及 restore 就会变成30, 90, 150，每一次在前一次基础上进行了旋转。save是入栈，restore是出栈。

1. var canvas = document.getElementById("canvas");
2. var context = canvas.getContext('2d');
3. context.lineWidth = "10";
4. context.strokeStyle = "#fe9901";
5. context.translate(canvas.width / 2, canvas.height / 2);
6. context.rotate( 30 / 180 * Math.PI);
7. context.beginPath();
8. context.moveTo(0, -180);
9. context.lineTo(0, -200);
10. context.stroke();
11. context.rotate( 30 / 180 * Math.PI);
12. context.beginPath();
13. context.moveTo(0, -140);
14. context.lineTo(0, -160);
15. context.stroke();

没有使用save，restore，第一次绘制时画布旋转30度，然后按照坐标绘制直线，第二次绘制在第一次基础上继续绘制，旋转30度，实际上相对于起点，旋转了60. 所以画出来两条直线不在一条指线上。

1. context.save();
2. context.rotate( 30 / 180 * Math.PI);
3. context.beginPath();
4. context.moveTo(0, -180);
5. context.lineTo(0, -200);
6. context.stroke();
7. context.restore();
8. context.rotate( 30 / 180 * Math.PI);
9. context.beginPath();
10. context.moveTo(0, -140);
11. context.lineTo(0, -160);
12. context.stroke();

第二次绘制加入save和restore， 再第一次绘制后，resore到起始状态，也就是现在画布又回到了0度位置，而不是30度，所以第二次绘制是从0度开始绘制，绘制出来应该和第一次的直线在一条指线上。