캔버스를 확대시킨다.
|
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);
-
}
결과
