티스토리 뷰
.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
링크
TAG
- measureText
- arc()
- Symfony
- Round
- virtualhost
- Canvas
- 곡선
- Fill
- JavaScript
- rect
- fillText
- 텍스트
- 글
- 배경색
- 심포니
- 캔버스
- 글자
- strokeText
- 베지어
- save
- 도형그리기
- 라즈베리파이
- GitLab
- Bezier
- 자바스크립트
- 튜토리얼
- stroke()
- translate
- HTML5
- 글쓰기