Ready, Get Set, GO!

  • HOME
  • TAG
  • MEDIA LOG
  • LOCATION LOG
  • GUEST BOOK
  • ADMIN
  • WRITE

translate 2

26. rotate() - 회전하기

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .rotate() .rotate( angle ) 객체를 angle만큼 회전시킵니다. 요소를 angle위치만큼 이동 시킵니다. 요소에 .rotate()를 적용할 경우 생각한것과 다른 위치에 요소가 위치해 있을 수 있습니다. 회전의 기준점이 canvas요소의 0,0위치이기 때문입니다. 요소의 중앙을 기준으로 회전을 시키고 싶을때에는 .translate()로 현재 canvas의 기준점을 요소의 중앙위치로 이동시켜 주어야 합니다. ?1234567ctx.translate(60, 60); // translate to rectangle center // x = x + 0.5 * width// y = y + 0.5 * heightctx.rotate..

Develop/canvas 2015.08.10

25. translate() - 위치이동

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .translate() .translate( x,y ) 객체를 x와 y만큼 이동시킵니다. ?12ctx.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 ?123456789101112function draw() { var ctx = document.getElementById('canvas').getC..

Develop/canvas 2015.08.10
이전
1
다음
더보기
프로필사진

Ready, Get Set, GO!

  • 분류 전체보기 (85)
    • Develop (74)
      • Jsp (0)
      • Asp (0)
      • JAVA (1)
      • MSSQL (1)
      • Javascript (5)
      • jQuery (0)
      • ExtJs (0)
      • Sencha (1)
      • CSS (3)
      • HTML (0)
      • Window Server (1)
      • Apach TomCat (0)
      • Node.js (14)
      • canvas (32)
      • Symfony (5)
      • RaspberryPi (6)
      • Linux (5)
    • Diary (1)
    • Photo (0)
      • 하율 (0)
      • momo (0)
    • ETC (3)

Tag

strokeText, HTML5, 글쓰기, GitLab, 라즈베리파이, rect, 튜토리얼, Canvas, JavaScript, arc(), stroke(), 자바스크립트, Symfony, 심포니, 캔버스, fillText, 글자, measureText, 글, 텍스트,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/06   »
일 월 화 수 목 금 토
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

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바