What is the use of the javascript save() method?-Front-end Q&A-php.cn

What is the use of the javascript save() method?

青灯夜游

Release： 2023-01-07 11:41:16

Original

4150 people have browsed it

In JavaScript, the save() method is used to save a copy of the current image state. This method pushes a copy of the current state into a stack that saves the image state; the syntax format "save( )".

What is the use of the javascript save() method?

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

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

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

Syntax

save()

Copy after login

Description

The save() method pushes a copy of the current state onto a stack that holds the image state. This allows you to temporarily change the image state and then restore the previous value by calling restore().
The graphics state of a canvas contains all properties of the CanvasRenderingContext2D object (except the read-only canvas properties). It also contains a transformation matrix that is the result of calling rotate(), scale(), and translate(). Additionally, it contains the clipping path, which is specified via the clip() method. Note, however, that the current path and current position are not part of the graphics state and are not saved by this method.

Note:

The save() and restore() methods must be used together to be effective.
The save() method is to save the various styles and attributes you set in save().

For example

First I created a box in the save method

<body>
	<canvas id="" width="600" height="400"></canvas>;
</body>
<script type="text/javascript">
	var pen = document.querySelector(&#39;canvas&#39;).getContext(&#39;2d&#39;);
	// 调用save方法
	pen.save();
	// 改变基点的位置
	pen.translate(300,300);
	// 设置填充颜色
	pen.fillStyle = &#39;red&#39;;
	pen.fillRect(0,0,100,100);
	pen.restore();
</script>

Copy after login

What is the use of the javascript save() method?

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

When I restore When I added a box later

<body>
	<canvas id="" width="600" height="400"></canvas>;
</body>
<script type="text/javascript">
	var pen = document.querySelector(&#39;canvas&#39;).getContext(&#39;2d&#39;);
	// 调用save方法
	pen.save();
	pen.translate(300,300);
	// 设置填充颜色
	pen.fillStyle = &#39;red&#39;;
	pen.fillRect(0,0,100,100);
	pen.restore();
	// 这里我在创建一个盒子
	pen.beginPath();
	pen.fillStyle = &#39;black&#39;;
	pen.fillRect(0,0,100,100);
	pen.fill();
</script>

Copy after login

What is the use of the javascript save() method?

, I discovered that the properties I set outside the save method had no effect on the ones in save, and the base point in save The settings also have no effect on the boxes set outside the save method.

Summary: The save method is equivalent to isolating the content I set and will not affect any outside content.

[Related recommendations: javascript learning tutorial]

The above is the detailed content of What is the use of the javascript save() method?. For more information, please follow other related articles on the PHP Chinese website!