sitelink1 | http://blog.naver.com/shadowbug/220743517764 |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | |
extra_vars5 | |
extra_vars6 |
캔버스를 확대시킨다.
context |
설명 |
scale(xRate, yRate) |
(xRate, yRate) 만큼 확대시킨다. |
javascript
(100, 100) (150, 150) 위치의 사각형을 2배로 확대 시키는 예제이다.
rotate 하나만 사용해서 사각형을 원하는대로 확대시킬 수 없으며
원점을 사각형의 중점으로 이동 시킨후 확대를 시켜야 생각한대로 확대되게 된다.
아래의 순서대로 차근차근 진행하면 올바르게 동작한다.
1. 2d의 평면상태 세팅 ( setTransform 매서드 )
2. 사각형의 중심부를 원점으로 세팅 ( translate )
3. 원하는 값으로 확대 ( scale )
4. 사각형의 중심부가 원점인 것을 인지하고 사각형을 그린다. ( fillRect )
이 패턴은 확대 뿐만 아니라 여러 예에서도 많이 사용되는 패턴이므로, 잘 숙달 할 필요가 있다.
-
-
function load(target) {
-
// 실제로 그려지는 위치의 캔버스 생성
-
var canvas = document.getElementById("draw");
-
var ctx = canvas.getContext("2d");
-
-
// 입력값
-
var x = 100;
-
var y = 100;
-
var cx = 300;
-
var cy = 300;
-
var rate = 2;
-
-
var width = cx - x;
-
var height = cy - y;
-
ctx.fillStyle = "red";
-
-
// 2d 평면 상태 세팅
-
ctx.setTransform(1, 0, 0, 1, 0, 0);
-
// 사각형 안으로 원점 이동
-
ctx.translate(x + .5 * width, y + .5 * height);
-
// 확대
-
ctx.scale(rate, rate);
-
// 원점이 사각형의 중심임을 인지하고 그림 그리기
-
ctx.fillRect(-.5 * width, -.5 * height, width, height);
-
}
결과
댓글 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 |
» | Canvas 확대 | 황제낙엽 | 2016.08.22 | 64 |
72 | Canvas setTransform 함수 | 황제낙엽 | 2016.08.22 | 69 |
71 | Canvas 회전 | 황제낙엽 | 2016.08.22 | 71 |
70 | 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 |