영욱닷컴(http://youngwook.com)

사각형(Rectangle)을 캔버스에 그리는 것을 통해서 어떻게 원하는 도형을 작성하고 다루게 되는지를 설명해 드릴려고 합니다.

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"> </canvas>
<button onclick="draw_square();return true;">Red Square</button>
<script>
   function draw_square() {
      var c1 = document.getElementById("c1");
      var c1_context = c1.getContext("2d");
      c1_context.fillStyle = "#f00";
      c1_context.fillRect(50, 50, 100, 100);
   }
</script>

위와 같이 캔버스를 하나 정의하고 버튼을 정의했습니다. 버튼의 OnClick 이벤트는 Java Script의 draw_square()를 호출하게 되어 있습니다. 버튼을 누르면 아래와 같은 실행 결과를 얻을 수 있습니다.

메소드나 속성의 이름을 보면 대충 뭘하는지 다들 짐작 할 수 있을 것 같습니다.
아래의 소스는 한 번쯤 실행시켜 보면 감을 잡는데 더 도움이 될 것 같습니다.

<div ><canvas id="Canvas2" width="200" height = "200" style="border:solid 1px #000000;"></canvas>
<div>
   <button onclick="blue_square_2();return true;">Blue Square</button>
   <button onclick="red_stroke_2();return true;">Red Square</button>
   <button onclick="clear_rect_2();return true;">Erase Everything</button>
</div>
</div>
<script>
   var c2 = document.getElementById("c2");
   var c2_context = c2.getContext("2d");
   function blue_square_2() { //Blue color square
      c2_context.fillStyle = "#00f";
      c2_context.fillRect(50, 50, 100, 100);
   }

   function red_stroke_2() { //Red color edges
      c2_context.strokeStyle = "#f00";
      c2_context.strokeRect(45, 45, 110, 110);
   }

   function clear_rect_2() { //Clear all
      c2_context.clearRect(40, 40, 120, 120);
   }
</script>

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

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>
   

 캔버스는 기본적으로 어떠한 것도 제공되지 있는 비여있는 공간을 제공해 줍니다. 비여있는 공간에 Java Script를 이용해서 연필이나 페인트 블러쉬를 사용해서 원하는 것을 표현할 수 있습니다. 
 
 물론 캔버스가 단순히 이미지를 표현하는 툴은 아닙니다. 오히려 그 이상의 역할을 할 수 있습니다. 이미지나 비디오 그리고 간단한 애니메이션에 이르기까지 많은 역할을 캔버스 하나로 커버할 수 있습니다.

캔버스를 정의하는 것은 아주 간단합니다.

<canvas width="200" height="200"></canvas>

위의 같이 한 줄을 입력하면 넓이와 높이가 200인 빈 공간이 하나 생깁니다. 사실 캔버스가 제공하는 기능은 바로 이 빈공간이라고 할 수 있습니다.
 이 빈공간에서 Java Script로 다양한 그림을 그리거나 객체를 표현 할 수 있습니다.

위의 예제는 캔버스에 가볍게 스타일을 지정해 본 경우 입니다. 
현재 캔버스를 지원하는 브라우저와 버전입니다.  

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

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>