2011/09/06 글 목록

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

2011.09.06 5.3 HTML5 Canvas: Path
2011.09.06 5.2 HTML5 Canvas: Shadow

2011. 9. 6. 12:30

5.3 HTML5 Canvas: Path

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

저작자표시변경금지

canvas, html5, HTML5시리즈

0 0

2011. 9. 6. 08:30

5.2 HTML5 Canvas: Shadow

HTML5 2011. 9. 6. 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로 지정하는 것을 볼 수 있습니다. 이에 따른 결과물은 다음과 같습니다.