2011.09.06 12:30

5.3 HTML5 Canvas: Path

HTML5 2011.09.06 12:30
Path는 라인을 그릴때 사용 할 수 있습니다.

위와 같은 라인을 그리기 위해서 아래와 같은 코드가 필요 합니다.

<div><canvas id="Canvas2" width="600" height = "200" style="border:solid 1px #000000;"></canvas>
<div>
    <button onclick="Vertical_line();return true;">Click me to draw a brown vertical line</button></div>
</div>

<script>
   var c3 = document.getElementById("c3");
   var c3_context = c3.getContext("2d");

   function Vertical_line() {
     c3_context.
moveTo(300, 10);
     c3_context.lineTo(300, 190);
     c3_context.strokeStyle = "brown";
     c3_context.stroke();
   }
</script>

여기서 중요한 것이 moveTo, lineTo, strokeStyle, stroke()이다.
moveTo는 라인을 그리기 위해서 해당 위치로 포인트를 옮기는 역할을 한다. lineTo는 라인의 길이와 방향을 설정하고 strokeStyle에서 스타일을 설정한다.

실제 그림을 그리는 코드는 stroke() 이다.

method Descriptions
moveTo(x,y) move to starting point with coordinate x and y.
lineTo(x,y) Draw a line to this point from starting point. Again x and y being the coordinate.
strokeStyle CSS color of the line
stroke A method to actually make javascript draw a line
beginPath Before you start drawing a new line with different color, you will have to call "beginPath".



참 쉽죠?

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고