2011.09.07 12:30

5.5 HTML5 Canvas: Text

HTML5 2011.09.07 12:30

<div><canvas id="c6" width="600" height = "200" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="showFillText();return true;">Fill Text</button>
<button onclick="showStrokeText();return true;">Stroke Text</button>
<button onclick="Clear_text();return true;">Erase Everything</button>
</div>
</div>

<script>
  var c6 = document.getElementById("c6");
  var c6_context = c6.getContext("2d");

  function showFillText() {
    c6_context.fillStyle = '#f00';
    c6_context.font = 'italic bold 30px sans-serif';
    c6_context.textBaseline = 'bottom';
    c6_context.fillText('HTML5 is cool!', 50, 100);
  }

  function showStrokeText() {
    c6_context.strokeStyle = "#003300";
    c6_context.font = '40px san-serif';
    c6_context.textBaseline = 'bottom';
    c6_context.strokeText('HTML5 is cool?', 300, 100);
  }

  function Clear_text() {
    c6_context.clearRect(1, 1, 600, 300);
  }
</script>


Method Description
fillText(text,x,y) Print the text with solid color within. Text color is determined by fillStyle().
strokeText(text,x,y) Print the text with only color the outline of the text. Text color is set by strokeStyle().
strokeStyle CSS color for text that call strokeText
fillStyle CSS color for text that call fillText
font CSS font style such as "bold, 10px, san-serif"
textBaseline This is a little bit tricky to explain. We will need another demo. The value for this propery can be "top", "hanging", "middle", "alphabetic", "ideographic" and "bottom". Default value is "alphabetic".

HTML5에서 Canvas에 원하는 텍스트를 출력할 수도 있습니다. 텍스트를 출력하는 것이 텍스트를 하나의 객체 단위로 표현하다기 보다는 일종의 비트맵 이미지로 글자를 그려 넣는다는 표현이 더 맞을 것 같습니다.

글자를 Canvas 위에 표현하기 위해서는 fillStyle, font, textBaseline, fillText등을 사용해서 표현해야 합니다.
fillStyle은 글자 색을 표현하고 font는 폰트를 출력한다. textBaseline의 경우는 텍스트의 기준 위치를 잡을때 사용할 수 있으며 실제 글은 fillText로 지정할 수 있습니다.


Baseline은 앞에서 이야기 한 것과 같이 폰트 위치의 기준선을 설정하는 역할을 합니다.

c7_context.textBaseline = "top";
c7_context.
fillText('Top', 5, 100);

c7_context.textBaseline = "bottom";
c7_context.fillText('Bottom', 80, 100);

c7_context.textBaseline = "middle";
c7_context.fillText('Middle', 200, 100);

c7_context.textBaseline = "alphabetic";
c7_context.fillText('Alphabetic', 300, 100);

c7_context.textBaseline = "hanging";
c7_context.fillText('Hanging', 400, 100);


텍스트를 마지막으로 캔버스의 사용방법을 정리합니다.
캔버스의 활용방법은 훨씬 더 많지만 여기서는 가장 기본적인 기능들을 사전적으로 정리하는 선에서 마치려고 합니다. ^^



김영욱 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>
저작자 표시 변경 금지
신고
2011.09.07 08:30

5.4 HTML5 Canvas: Image

HTML5 2011.09.07 08:30
캔버스에서는 다순히 백터 그래픽만 표현할 수 있는 것이 아니라 이미지도 표현할 수 있습니다.

<div"><canvas id="c5" width="600" height = "300" style="border:solid 1px #000000;"></canvas>
<div>
<button onclick="draw_dragon();return true;">Draw Dragon</button>
<button onclick="draw_smaller_dragon();return true;">Draw smaller dragon</button>
<button onclick="draw_dragon_head();return true;">Draw Dragon Head</button>
<button onclick="Clear_image();return true;">Erase Everything</button>
</div>
</div>

<script>
  var c5 = document.getElementById("c5");
  var c5_context = c5.getContext("2d");

  var dragon = new Image();
  dragon.src = 'images/chinese_dragon.png';

  function draw_dragon() {
    c5_context.drawImage(dragon, 100, 5);
  }

  function draw_smaller_dragon() {
    c5_context.drawImage(dragon, 10, 5, 58, 100);
  }

  function draw_dragon_head() {
    c5_context.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145);
  }

  function Clear_image() {
    c5_context.clearRect(1, 1, 600, 300);
  }
</script>


drawImage는 이미지를 캔버스에 표현할 때 사용할 수 있습니다. 사용하는 방법은 먼저 Java Script에서 이미지 객체를 생성한 다음 실제 이미지가 존재하는 경로를 설정합니다. 

var dragon = new Image();
dragon.src = 'images/chinese_dragon.png';


이미지가 준비되었으면 drawImage()를 호출해서 캔버스에 이미지를 그리면 됩니다.
drawImage()는 3 가지 방법으로 사용할 수 있는데 3개의 인자를 사용하면 훈순히 이미지의 위치만 x, y로 지정할 수 있고 5개의 인자를 사용하면 출력할 이미지의 넓이와 높이를 지정할 수 있으며 마지막으로 9개의 인자를 사용하면 이미지의 일부를 표시할 수 있다.  

Overloading of drawImage() Description
3 arguments
drawImage (img,x,y)
img is the image element.
x and y being the coordinate to place the image object.
5 arguments
drawImage (img,x,y,width,height)
img is the image element.
x and y being the coordinate to place the image object. width and height will be image size that you want, resize as you want.
9 arguments
drawImage (img, crop_x, crop_y, crop_width, crop_height, x, y, width, height)
img is the image element.
crop_x and crop_y is where you start cropping your image.
crop_width and crop_height is the size you want to crop your image.
x and y still being the coordinate to place the image object.
width and height will be image size that you want, resize as you like it.

 


김영욱 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>
저작자 표시 변경 금지
신고
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>
저작자 표시 변경 금지
신고
2011.09.06 08:30

5.2 HTML5 Canvas: Shadow

HTML5 2011.09.06 08:30
지난번 글에서 캠퍼스에서 사각형을 어떻게 그릴 수 있는가에 대해서 정리를 했다면 이번 글에서는 사각형에 어떻게 그림자를 그리는 가에 대한 설명입니다.
 그림자를 그리는데에는 shadowOffSetX, shadowOffSetY, shadowBlur, shadowColor 이렇게 네개의 속성을 사용할 수 있습니다.

Context properties Descriptions
shadowOffsetX Horizontal distance (x-axis) between the shadow and the shape in pixel.
shadowOffsetY Vertical distance (y-axis) between the shadow and the shape in pixel.
shadowBlur How blur you want your shadow to be.
shadowColor Obviously, this is to set the color of your shadow

예제를 보면 확실히 쉽게 이해 될 것 같습니다.

<div><canvas id="c8" width="200" height = "200" style="border:solid 1px #000000;"></canvas></div>

<script>
var c8 = document.getElementById("c8");
var c8_context = c8.getContext("2d");

function draw_rectangle() {
c8_context.
shadowOffsetX = 5;
c8_context.
shadowOffsetY = 5;
c8_context.
shadowBlur = 10;
c8_context.shadowColor = "DarkGoldenRod";
c8_context.fillStyle = "Gold";
c8_context.fillRect(20, 20, 100, 120);
}
window.onload = draw_rectangle();
</script>

위의 예제를 보면 그림자의 위치는 X, Y 각각 5 만큼 공간을 띄우고 흐림의 정도를 10단계로 설정하고 컬러는 DarkGoldenRod로 지정하는 것을 볼 수 있습니다. 이에 따른 결과물은 다음과 같습니다.

깔끔하게 나오네요 ^^

김영욱 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>
저작자 표시 변경 금지
신고
2011.09.05 12:30

사각형(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()를 호출하게 되어 있습니다. 버튼을 누르면 아래와 같은 실행 결과를 얻을 수 있습니다.

소스코드를 보면 누구나 이해할 수 있을 만큼 간단한 소스로 먼저 Java Script에서 캔버스를 얻어내는 부분입니다.
 
var c1 = document.getElementById("c1");

캔버스를 찾아내서 c1이라는 변수에 일단 저장한 다음 c1이라는 이름의 캔버스에서 2D 컨텍스트를 가져와서 c1_context로 정의합니다.

var c1_context = c1.getContext("2d");

c1_context의 내용을 빨간 색으로 채우기 위해서 fillStyle 속성을 '#f00'로 채우고 있습니다.

c1_context.fillStyle = "#f00";

마지막으로 사각형을 직접 채웁니다.

c1_context.fillRect(50, 50, 100, 100);

코드를 보시면 아시겟지만. 캔버스의 역할은 200 X 200짜리 그림판을 제공해 줄 뿐이고 실제 액션은 모두 Java Script로 이루어지고 있는 있을 것을 볼 수 있습니다. 즉 HMTL5을 잘 다루기 위한 필 수 조건은 바로 Java Script라고 보시면 될 것 같습니다.
아래에 있는 표는 관련된 메서드와 속성입니다.

Methods of "Context" Descriptions
fillStyle CSS Color, pattern or gradient within the shape. Default fillStyle is solid black color.
strokeStyle Color or CSS style of the lines of the shape
fillRect(x, y, width, height) Draw a rectangle start from coordinate x and y and size of width x height.
strokeRect(x, y, width, height) Draw a rectangle with just its edges.
clearRect(x, y, width, height) Clear the area specified in x, y coordinate and area of width x height
 

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

<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로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


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>
저작자 표시 변경 금지
신고
2011.09.05 09:40

5. HTML5 Canvas

HTML5 2011.09.05 09:40

HTML5의 인기있는 주제중의 하나가 캔버스(Canvas) 입니다. HTML5의 캔버스는 미술에서 그림을 그릴 때 사용하는 캔버스처럼 어떤한 것이라도 올려 놓고 그리는 용도로 사용할 수 잇습니다.  

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

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

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

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

<canvas id="Canvas1" width="200" height="200" style="border:solid 1px #000000"></canvas>

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

Browsers Basic Canvas Support
IE 7 ✓ (requires ExplorerCanvas)
IE 9 Beta
Firefox 3.0
Safari 3.0
Chrome 3.0
Opera 10


김영욱 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>
저작자 표시 변경 금지
신고