HTML5 캔버스 scale()

1 개요

HTML5 canvas scale() Method

HTML5 캔버스 scale()

• 컨텍스트에 x축, y축 방향으로 크기조정(확대·축소)을 적용하는 함수
• 적용 이후 그리는 도형의 (x, y) 좌표, 길이, 선의 두께에 모두 적용됨

2 예시

<canvas id='myCanvas' width='100', height='100'></canvas>
<script>
var ctx = document.getElementById('myCanvas').getContext('2d');
 
ctx.strokeRect(10,10,30,30);
ctx.scale(2,2);
ctx.strokeRect(10,10,30,30);
</script>

→ ( 10, 10 ) 위치에 30 x 30 사각형을 그린 후

→ ( 20, 20 ) 위치에 60 x 60 사각형을 그린다.

3 같이 보기

• HTML5 캔버스 rotate()
• HTML5 캔버스 translate()
• HTML5 캔버스 transform()
• HTML5 캔버스
• 크기조정

4 참고

• http://www.w3schools.com/tags/canvas_scale.asp
• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale
• http://www.html5canvastutorials.com/advanced/html5-canvas-transform-scale-tutorial/