How to use the save () method in javascript

In this article, the editor introduces in detail "how to use the save () method in javascript". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use the save () method in javascript" can help you solve your doubts.

In javascript, the save () method is used to save a copy of the current image state, which presses a copy of the current state into a stack that holds the image state; the syntax format is "save ()".

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

The save () method is a method of the HTML DOM CanvasRenderingContext2D object.

The save () method saves a copy of the current image state.

Grammar

Save ()

Description

The save () method presses a copy of the current state into a stack that holds the image state. This allows you to temporarily change the state of the image and then restore the previous value by calling restore ().

The graphic state of a canvas contains all the properties of the CanvasRenderingContext2D object (except for read-only canvas properties). It also contains a transformation matrix, which is the result of calls to rotate (), scale (), and translate (). In addition, it contains a clipping path, which is specified by the clip () method. Note, however, that the current path and location are not part of the drawing state and are not saved by this method.

Description:

The save () and restore () methods need to be used together to have an effect.

The save () method saves the various styles and properties that you set in save ().

For instance

First, I created a box in the method of save

; var pen = document.querySelector ('canvas'). GetContext (' 2d'); / call the save method pen.save (); / / change the position of the base point pen.translate (300300); / / set the fill color pen.fillStyle = 'red'; pen.fillRect (0Ling 0100100); pen.restore ()

You can see that I have set the color style and base point into it.

When I add another box after restore

; var pen = document.querySelector ('canvas'). GetContext (' 2d'); / / call the save method pen.save (); pen.translate (300300); / / set the fill color pen.fillStyle = 'red'; pen.fillRect (0mem0100100); pen.restore (); / / here I'm creating a box pen.beginPath () Pen.fillStyle = 'black'; pen.fillRect (0pj0100100); pen.fill ()

Here we find that the property I set outside the save method has no effect on the save, and the setting of the base point in the save has no effect on the box set outside the save method.

After reading this, the article "how to use the save () method in javascript" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.