How does HTML5Canvas save save the restored state?

The content of this article is about how to save and restore the status of HTML5Canvas save. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When painting, it often happens that I was using a green pen to draw, but suddenly I needed to use a red pen to draw a few strokes, but after I finished painting, I had to switch to a green pen. If you are painting in reality, you can dip the pen in different inks, and then dip the pen in the previous ink after drawing, or prepare several pens and choose which one you want to use.

This can also be done in Canvas, but there is always only one brush in Canvas. So, if you want to change the color of the brush, you need to save and restore the state. The state is actually a snapshot of the current properties of the canvas, including:

The property values ​​of graphics, such as strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, etc.

Current clipping path.

The currently applied transformation (i.e. translation, rotation, and scaling).

In Canvas, use the save() method to save the state and the restore() method to restore the state. The Canvas state is saved in the form of a stack: every time the save() method is called, the current state will be pushed onto the top of the stack and saved; every time the restore() method is called, the state on the top of the stack will be taken out and the canvas Return to this state and draw using this state.

context.fillStyle = "red";
context.fillRect(10, 10, 180, 180);
context.fill();
context.save();                 // ① 栈: "red"
context.fillStyle = "green";
context.fillRect(30, 30,140,140);
context.save();                 // ② 栈: "red"，"green"
context.fillStyle = "blue";
context.fillRect(50, 50, 100,100);
context.restore();               // 恢复到 ② 的状态, 栈: "red"，"green"
context.beginPath();
context.fillRect(70, 70, 60, 60);   // 用栈顶的状态绘图，填充"green"
context.restore();               // 恢复到 ① 的状态, 栈: "red"
context.fillRect(90, 90, 20, 20);   // 用栈顶的状态绘图，填充" red "
context.fill();

In the above code, first draw the first red rectangle. Then the first save() method is called to push the state of the first red rectangle onto the stack. At this time, there is only one element "red" in the stack, marked as ①. Then set the state to "green" and draw the second rectangle. At this time, the green rectangle is drawn. Then the second save() method is called to push the status of the second green rectangle onto the stack. At this time, there are two elements "red" and "green" in the stack, and the top element of the stack is "green", recorded as ②. Then draw the third blue rectangle. The save() method is not called here, and the state of the stack remains unchanged. Then call the restore() method to restore to the state of ② and draw the fourth rectangle. At this time, the top element of the stack is "green", so a green rectangle is drawn. Then call the restore() method to return to the state of ① and draw the fifth rectangle. At this time, the top element of the stack is "red", so a red rectangle is drawn.

As you can see from this example, wrapping the code through the save-restore combination is essentially wrapping the style between the save() method and the restore() method. up so that they do not affect the graphics drawn later.

Both the save() method and the restore() method can be called any number of times and can be nested. Remember, the save() method and the restore() method always appear in pairs. Each time the restore() method is called, the state of the stack is restored to the last time the save() method was called, and the state saved at the top of the stack is used. To draw.

The above is the complete introduction to how to save the recovery state in HTML5Canvas save. If you want to know more about Html5 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How does HTML5Canvas save save the restored state?. For more information, please follow other related articles on the PHP Chinese website!