sitelink1 | http://blog.naver.com/shadowbug/220743435036 |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | |
extra_vars5 | |
extra_vars6 |
일반적으로 캔버스의 크기만큼 영역으로 선택이 되어 있으며,
이로 인하여 캔버스 전체에 그림이 그려진다.
하지만, 캔버스의 일부에만 그림이 그려져야 할 필요가 있을 경우 clip 함수를 사용해야 한다.
context |
설명 |
clip |
선택된 영역에서만 그림이 그려지도록 설정한다. |
javascript
clip을 사용하였을 때, 이전상태로 되돌리기 위해서
주로 save와 restore 함수를 이용하여 되돌린다.
-
-
function load(target) {
-
// 실제로 그려지는 위치의 캔버스 생성
-
var canvas = document.getElementById("draw");
-
var ctx = canvas.getContext("2d");
-
-
ctx.fillStyle = "#aaaaaa";
-
ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-
// 현재 상태를 저장
-
ctx.save();
-
try {
-
// (100, 100) (200, 200) 을 그리기 영역으로 설정
-
ctx.rect(100, 100, 200, 200);
-
ctx.clip();
-
-
// 그림 그리기
-
ctx.beginPath();
-
ctx.strokeStyle = "#ff0000";
-
ctx.arc(150, 150, 50, 0, 2*Math.PI, true);
-
ctx.stroke();
-
ctx.closePath();
-
} finally {
-
ctx.restore();
-
}
-
}
결과
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
85 | HTML5 강좌 9강 - HTML5 태그 - canvas 다각형 | 황제낙엽 | 2016.12.03 | 52 |
84 | HTML5 강좌 8강 - HTML5 태그 - canvas 선그리기 | 황제낙엽 | 2016.12.03 | 51 |
83 | HTML5 강좌 7강 - HTML5 태그 - canvas 사각형 | 황제낙엽 | 2016.12.03 | 38 |
82 | HTML5 강좌 6강 - HTML5 태그 - canvas #1 | 황제낙엽 | 2016.12.03 | 133 |
81 | HTML5 강좌 5강 - HTML5 태그 - prograss,download | 황제낙엽 | 2016.12.03 | 66 |
80 | HTML5 강좌 4강 - HTML5 태그 - mark,time,meter | 황제낙엽 | 2016.12.03 | 61 |
79 | HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 | 황제낙엽 | 2016.12.03 | 51 |
78 | HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 | 황제낙엽 | 2016.12.03 | 246 |
77 | HTML5 강좌 1강 - HTML5 개념 및 기본구조 | 황제낙엽 | 2016.12.03 | 59 |
76 | HTTP 오류 코드의 종류 | 황제낙엽 | 2016.12.01 | 77 |
75 | Multiple Canvas Layer 예제 | 황제낙엽 | 2016.08.23 | 31 |
74 | Canvas 개요 | 황제낙엽 | 2016.08.22 | 69 |
73 | Canvas 확대 | 황제낙엽 | 2016.08.22 | 64 |
72 | Canvas setTransform 함수 | 황제낙엽 | 2016.08.22 | 69 |
71 | Canvas 회전 | 황제낙엽 | 2016.08.22 | 71 |
» | Canvas 영역 선택 | 황제낙엽 | 2016.08.22 | 77 |
69 | Canvas CanvasRenderingContext2D Context 속성 | 황제낙엽 | 2016.08.22 | 19 |
68 | Canvas 도형의 클릭 이벤트 처리 | 황제낙엽 | 2016.08.22 | 263 |
67 | Canvas 이미지 추출 | 황제낙엽 | 2016.08.22 | 122 |
66 | Canvas 더블버퍼링 | 황제낙엽 | 2016.08.22 | 195 |