Appreciated save Canvas () and restore () method

save () and restore () method is the essential method to draw complicated graphic. They are used to save and restore the state of the canvas are no parameters.

Canvas state is saved in the stack (stack) way, every call  save method, the current state will be pushed into the heap saved. Such states include: deformation of the current application (ie, move, rotate and zoom, see below):
strokeStyle,  fillStyle,  globalAlpha,  lineWidth,  lineCap,  lineJoin,  miterLimit,  shadowOffsetX, shadowOffsetY,  shadowBlur,  shadowColor,  globalCompositeOperation 的值

you can call as many times as  save method. Each invocation  restore method, on a saved state will pop up from the heap, all settings are restored.

For example save and restore applications of it. We try to use this example of a continuous state rectangle to describe canvas heap is how it works. The first step is to use the default setting to draw a senior square, and then save it states. Change the fill color painting of the second small little white square, and then save it states. Fill color changed again to draw a little less blue square. Then we call a method to restore set back fillStyle = "white" in the previous save state, i.e., without re-setting the color value of the drawing minimum rectangle bulking which color is white. Once we call  the state of the heap last state will pop up, and restore all settings. If not before use 



restoresave Save the state, then we need to manually change the settings to a previous state, this time for twenty-three property or applicable, once more, our code will soar. Briefly restore method can be construed to save the current state of the set corresponding to the previous state full recovery

Code:
<Script type = "text / JavaScript">
the window.onload = function () {
 var Document CTX = .getElementByIdx_x_x ( "Canvas") the getContext ( "2D");.
 ctx.fillRect (10,10,150,150);

 ctx.save ();
 ctx.fillStyle = "White";
 ctx.fillRect (30,30,110,110);

 ctx.save ();
 ctx.fillStyle = "Blue";
 ctx.fillRect (50,50,70,70);
 ctx.restore (); // return to a previous state, i.e., = ctx.fillStyle "White";

 ctx.save ();
 ctx.fillRect (70,70,30,30); // so here fillStyle not set when the color is white, pay attention to Oh! If a restore is also behind the white rectangle at fillStyle just here on the black
 ctx.restore ();
}
</ Script>