Html5 Canvas Preliminary Study Notes (5) -Drawing State

In the previous article, we mentioned some drawing status values, such as line width and color. In Html5#Canvas, the drawing state refers to the entire set of 2d rendering context appearances Properties, including drawing outline color, fill color, line width, transformation matrix, clipping area, etc. I will introduce more status values ​​in future articles. This article mainly explains examples of saving state and restoring state, and explains the structure of this stack.

First look at the following example:

                                                                                                                                                                 The process, the code is as follows:

The saving status is through the sentence context.save();

To store the current state, save the current state to a stack state. We first store the

state into the stack, and then store green When , green is on top of red, so that when the state is restored, context.restore(); will return the state at the top of the stack. As shown in the figure, the color that is popped first is green, and the pop-up status will no longer be saved. To sum up, save and restore are Equivalent to the push and pop methods in the stack. The above is the content of Html5 Canvas preliminary study notes (5) - drawing status. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!