25. translate() - 위치이동

GuriZzang.com에 오시면 

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

.translate()

.translate( x,y ) 객체를 x와 y만큼 이동시킵니다. 

?

1 2	ctx.translate( 15,15 ); ctx.rillRect( 10,10,20,20 );

가령 .fillRect( 10,10,20,20 ) 만으로 사각형을 그릴경우 10,10 위치부터 20*20 사각형이 그려지게 됩니다.

하지만 .translate( 15,15 )를 주게되면 가로세로 15씩 이동해서 실제 .fillRect( 35,35,20,20 )과 동일한 결과를 얻을 수 있습니다.

Source 

?

1 2 3 4 5 6 7 8 9 10 11 12

function draw() {   var ctx = document.getElementById('canvas').getContext('2d');   for (var i=0;i<3;i++) {     for (var j=0;j<3;j++) {       ctx.save();       ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';       ctx.translate(10+j*50,10+i*50);       ctx.fillRect(0,0,25,25);       ctx.restore();     }   } }

Demo