티스토리 뷰

Develop/canvas

27. scale() - 크기확대/축소

GuriZzang 2015. 8. 10. 15:32

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.


.scale()

.scale( x, y ) 객체의 정보들(x,y좌표, 가로세로 길이등)을 가로는 x만큼, 세로는 y 만큼 곱해줍니다.


1
2
3
4
5
ctx.fillRect( 1,5,10,10 );
//x좌표 1, y좌표 5 지점에서 가로10 세로10 크기의 사각형을 그려줍니다.
ctx.scale( 10,3 );   //가로10, 세로3만큼 확대
ctx.fillRect( 1,5,10,10 );
//x좌표 10, y좌표 3, 가로 100, 세로 30 크기의 사각형을 그려줍니다.

값이 1일경우 원본사이즈이며 음수로 갈경우 해당 축을 기준으로 반전 됩니다.



Source 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
     
    // draw a simple rectangle, but scale it.
    ctx.save();
    ctx.scale(10, 3);
    ctx.fillRect(1,10,10,10);
    ctx.restore();
     
    // mirror horizontally
    ctx.scale(-1, 1);
    ctx.font = "48px serif";
    ctx.fillText("MDN", -135, 120);
}



Demo



'Develop > canvas' 카테고리의 다른 글

29. fillText() - 글자그리기  (0) 2015.08.10
28. transform() - 회전  (0) 2015.08.10
27. scale() - 크기확대/축소  (0) 2015.08.10
26. rotate() - 회전하기  (0) 2015.08.10
25. translate() - 위치이동  (0) 2015.08.10
24. restore() - 저장된 스타일 복원  (0) 2015.08.10
댓글
댓글쓰기 폼
공지사항
Total
51,682
Today
3
Yesterday
37
링크
«   2020/10   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함