그리기 컨텍스트 상태의 저장과 복원 HTML5



그리기 컨텍스트 상태의 저장과 복원

 

 

종전의 예제코드중에서 이미지에 대한 변형작업을 할때에,

변형 후에 다시 돌려놓고, 변형후에 또 돌려놓는 무식한 코드를 보았을 것이다.

이러한 순간의 상태를 저장해놓고, 다시 꺼내쓰는 방법을 소개한다.

 

      - save()

그리기 컨텍스트의 상태를 저장한다.

현재 캔버스에 그려진 그래픽이나 패스는 저장대상이 아니며, 아래의 내부상태나 속성이 저장가능하다.

 

- 좌표변환 매트릭스

- 클리핑 영역

- strokeStyle

- fillStyle

- globalAlpha

- lineWidth

- lineCap

- lineJoin

- miterLimit

- shadowOffsetX

- shadowOffsetY

- shadowBlur

- shadowColor

- globalCompositeOperation

- font

- textAlign

- textBaseline

      - restore()

그리기 컨텍스트의 상태를 복원한다.

save()로 저장된 상태는 스택 자료구조에 쌓이고, restore()를 호출할때마다 LIFO 순으로 꺼내어진다.

 

앞서 나왔던 코드를 save()와 restore()로 변경하여 작성해보자.

변경된 부분은 빨간색으로 표시하겠다.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="500" height="500"></canvas>

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");

 //기본 텍스트 출력
 context.fillText("안녕하세요!", 30, 30);

 //상태저장
 context.save();
 
 //확대
 context.scale(2, 1.5);
 context.fillText("안녕하세요! scale()", 30, 30);

 //복원
 context.restore();

 //상태저장
 context.save();

 //회전
 var angle = 20 * Math.PI / 180;

 context.rotate(angle);
 context.fillText("안녕하세요! rotate()", 30, 30);

 context.restore();
 context.save();

 //이동
 context.translate(50, 50);
 context.fillText("안녕하세요! translate()", 30, 30);

 context.restore();
 //-->
 </SCRIPT>

</BODY>
</HTML>

 

결과는 지난예제와 동일하므로 생략한다.


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210