그래픽 변경하기 HTML5



그래픽 변경하기

 

 

지금껏 캔버스에서 사용한 그리기 컨텍스트들은 좌표를 이용하여 사용되었다.

그런데...

좌표 말고도 메서드를 이용하여 어떠한 객체를 컨트롤 할 수도 있다고 한다.

왜 진작 하지 않은거야? -_-+

 

      - scale(x, y)

가로방향의 배율 x와 세로방향의 배율 y를 지정하여 좌표를 확대, 축소 가능하다.

      - rotate(angle)

좌표를 지정한 각도만큼 회전시킨다. 회전의 중심은 (0, 0)이다.

      - translate(x, y)

가로방향으로 x만큼, 세로방향으로 y만큼 좌표를 변경할 수 있다.

      - transform(m11, m12, m21, m22, dx, dy)

좌표변환 매트릭스에 직접 변경을 적용한다.

여러번 호출하면 같은 변환 매트릭스에 대해 여러번의 변경을 적용할 수 있다.

      - setTransform(m11, m12, m21, m22, dx, dy)

좌표변환 매트릭스를 초기화한 다음 전달된 인수로 transform()을 호출한다.

 

역시 뭔가 느낌이 전혀 오지 않는다.

우리는 늘 그래왔듯이 예제를 통해 알아본다.

 

 <!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.scale(2, 1.5);
 context.fillText("안녕하세요! scale()", 30, 30);

 //확대취소
 context.scale(1/2, 1/1.5);

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

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

 //회전취소
 context.rotate(-angle);

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

 //이동취소
 context.translate(-50, -50);
 //-->
 </SCRIPT>

</BODY>
</HTML>

 

예제를 작성한 이후 처음으로 주석을 달았다 -_-;

사실 그동안 귀찮아서 안달았던거였는데, 이번엔 달아야만 했다.

닥치고 결과를 보자.

 

 

 

transform()과 setTransform() 메서드는 현재 좌표변환 매트릭스에 대해 직접 변경내용을 적용한다.

transform() 메서드는 현재 변환행렬에 다음의 행렬을 곱해준다.

 

m11

m21

dx 

m12

m22

dy

0

 

제일 위의 메서드 프로토타입부분에서 말했듯이, 계속해서 변환행렬을 곱해주는것이 transform()

초기화를 한뒤에 변환행렬을 곱해주는것이 setTransform() 이며, 이게 두개의 차이점이다.

 

그러면 지금까지 배운 변형메서드들을 이용하여 예제를 작성해보자.

마치 거울에 이미지가 비춰지는것과 같은 효과를 연출해 낼 수 있다. 정말이냐고?

정말이다. 아래그림을 보면 "오호~ 이거 좀 쓸만하군?" 하는 소리가 나올지도 모른다.

 

이건 테스트용 이미지 test.jpg

 

 

이건 실제 출력된 결과.

쓸만하지 않겠는가? 아니라고? -_-;

 

이런 그림 하나 덩그러니 그리는것말고도 활용할 수 있는 범위는 당신의 아이디어에 달려있다는거다! 버럭!


덧글

댓글 입력 영역


통계 위젯 (화이트)

1622
132
358626

red 210