자바스크립트 save() 메소드의 용도는 무엇입니까?-프런트엔드 Q&A-php.cn

자바스크립트 save() 메소드의 용도는 무엇입니까?

青灯夜游

풀어 주다： 2023-01-07 11:41:16

원래의

4098명이 탐색했습니다.

JavaScript에서 save() 메서드는 현재 이미지 상태의 복사본을 저장하는 데 사용됩니다. 이 메서드는 현재 상태의 복사본을 이미지 상태를 저장하는 스택에 푸시합니다. 구문 형식은 "save()"입니다.

자바스크립트 save() 메소드의 용도는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

save() 메서드는 HTML DOM CanvasRenderingContext2D 개체의 메서드입니다.

save() 메서드는 현재 이미지 상태의 복사본을 저장합니다.

Syntax

save()

로그인 후 복사

Description

save() 메서드는 현재 상태의 복사본을 이미지 상태를 보유하는 스택에 푸시합니다. 이를 통해 이미지 상태를 일시적으로 변경한 다음, Restore()를 호출하여 이전 값을 복원할 수 있습니다.
캔버스의 그래픽 상태에는 CanvasRenderingContext2D 개체의 모든 속성이 포함됩니다(읽기 전용 캔버스 속성 제외). 또한rotate(), scale() 및translate() 호출의 결과인 변환 행렬도 포함되어 있습니다. 또한, 여기에는clip() 메서드를 통해 지정되는 클리핑 경로가 포함됩니다. 그러나 현재 경로와 현재 위치는 그래픽 상태의 일부가 아니며 이 방법으로 저장되지 않습니다.

참고:

save() 및 Restore() 메서드를 함께 사용해야 효과적입니다.
save() 메소드는 save()에서 설정한 다양한 스타일과 속성을 저장하는 것입니다.

예를 들어

먼저 저장 메소드에서 상자를 생성했습니다

<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>

로그인 후 복사

자바스크립트 save() 메소드의 용도는 무엇입니까?

그 안에 색상 스타일과 기준점을 설정한 것을 볼 수 있습니다

내가 복원 후 상자 추가

<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>

로그인 후 복사

자바스크립트 save() 메소드의 용도는 무엇입니까?