DOM Canvas 영역 선택

일반적으로 캔버스의 크기만큼 영역으로 선택이 되어 있으며, 

이로 인하여 캔버스 전체에 그림이 그려진다.

하지만, 캔버스의 일부에만 그림이 그려져야 할 필요가 있을 경우 clip 함수를 사용해야 한다.

javascript

clip을 사용하였을 때, 이전상태로 되돌리기 위해서

주로 save와 restore 함수를 이용하여 되돌린다.

1.  

2. function load(target) {

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

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

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

6.  

7.     ctx.fillStyle = "#aaaaaa";

8.     ctx.fillRect(0, 0, canvas.width, canvas.height);

9.  

10.     // 현재 상태를 저장

11.     ctx.save();

12.     try {

13.         // (100, 100) (200, 200) 을 그리기 영역으로 설정

14.         ctx.rect(100, 100, 200, 200);

15.         ctx.clip();

16.        

17.         // 그림 그리기

18.         ctx.beginPath();

19.         ctx.strokeStyle = "#ff0000";

20.         ctx.arc(150, 150, 50, 0, 2*Math.PI, true);

21.         ctx.stroke();

22.         ctx.closePath();

23.     } finally {

24.         ctx.restore();

25.     }

26. }

결과