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

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