Develop/canvas
27. scale() - 크기확대/축소
GuriZzang
2015. 8. 10. 15:32
.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