DOM Canvas 확대

캔버스를 확대시킨다.

javascript

(100, 100) (150, 150) 위치의 사각형을 2배로 확대 시키는 예제이다.

rotate 하나만 사용해서 사각형을 원하는대로 확대시킬 수 없으며 

원점을 사각형의 중점으로 이동 시킨후 확대를 시켜야 생각한대로 확대되게 된다.

아래의 순서대로 차근차근 진행하면 올바르게 동작한다.

1. 2d의 평면상태 세팅 ( setTransform 매서드 )

2. 사각형의 중심부를 원점으로 세팅 ( translate )

3. 원하는 값으로 확대 ( scale )

4. 사각형의 중심부가 원점인 것을 인지하고 사각형을 그린다. ( fillRect )

이 패턴은  확대 뿐만 아니라 여러 예에서도 많이 사용되는 패턴이므로, 잘 숙달 할 필요가 있다.

1.  

2. function load(target) {

3.     // 실제로 그려지는 위치의 캔버스 생성

4.     var canvas = document.getElementById("draw");

5.     var ctx = canvas.getContext("2d");

6.  

7.     // 입력값

8.     var x = 100;

9.     var y = 100;

10.     var cx = 300;

11.     var cy = 300;

12.     var rate = 2;

13.  

14.     var width = cx - x;

15.     var height = cy - y;

16.     ctx.fillStyle = "red";

17.  

18.     // 2d 평면 상태 세팅

19.     ctx.setTransform(1, 0, 0, 1, 0, 0);

20.     // 사각형 안으로 원점 이동

21.     ctx.translate(x + .5 * width, y + .5 * height);

22.     // 확대

23.     ctx.scale(rate, rate);

24.     // 원점이 사각형의 중심임을 인지하고 그림 그리기

25.     ctx.fillRect(-.5 * width, -.5 * height, width, height);

26. }

결과