2011/09/07 글 목록

2011/09/07 에 해당되는 글 2건

2011.09.07 5.5 HTML5 Canvas: Text (1)
2011.09.07 5.4 HTML5 Canvas: Image

2011. 9. 7. 12:30

5.5 HTML5 Canvas: Text

HTML5 2011. 9. 7. 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 강좌 전체 목록

저작자표시변경금지

canvas, html5, HTML5시리즈

0 1

학생 2014.12.03 15:17 ADDR EDIT/DEL REPLY
안녕하세요 온라인상에서 뵈니 더반갑습니다

도움이 많이 되었습니다. 감사합ㄴ디ㅏ.

2011. 9. 7. 08:30

5.4 HTML5 Canvas: Image

HTML5 2011. 9. 7. 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.