티스토리 뷰

Develop/canvas

25. translate() - 위치이동

GuriZzang 2015. 8. 10. 15:31

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

'Develop > canvas' 카테고리의 다른 글

27. scale() - 크기확대/축소  (0) 2015.08.10
26. rotate() - 회전하기  (0) 2015.08.10
25. translate() - 위치이동  (0) 2015.08.10
24. restore() - 저장된 스타일 복원  (0) 2015.08.10
23. save() - 현재 스타일저장  (0) 2015.08.10
22. Slicing - 이미지 자르기(크롭)  (0) 2015.08.10
댓글
댓글쓰기 폼
공지사항
Total
51,684
Today
5
Yesterday
37
링크
«   2020/10   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함