HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자

HTML5의 canvas 를 이용해서 브라우저에 무엇인가 그리는 법을 배우고 있습니다.
지난시간에는 첫시간으로 사각형 그리기에 대해 알아봤습니다.

일단 그리기는 처음에 선 그리기부터 배우는게 맞지 않나 싶네요. 어린 애들도 처음에 선따라 그리기 하잖아요?

선을 그려 보겠습니다.
javascript 내용을 아래와 같이 바꿔 보세요.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
   
    canvas.beginPath();
    canvas.moveTo(50,50);
    canvas.lineTo(70,250);
    canvas.lineTo(300,200);
    canvas.closePath();
    canvas.stroke();
 }
 window.addEventListener("load",doFirst,false);

처음에 선을 그리겠다고 의사표현을 합니다. 그것이 beginPath(); 이고 나중에 선 그리는게 끝났다고 얘기해 줍니다. 그게 closePath() 입니다.
그 안에서 선을 그리면 되는데요.
처음에 시작할 부분은 moveTo()에서 정해 줍니다. 그 다음에 lineTo로 첫지점에서 다음지점까지 (여기서 지점은 좌표를 말합니다.) 선을 그어줍니다. 이 lineTo가 계속 되면 좀 더 많은 선이 그어 지겠죠.
이렇게 선을 그었으면 이걸 canvas에 표시하라고 얘기해 줘야 합니다. 이것이 stroke() 입니다. 컴퓨터는 이렇게 하나하나 일일이 얘기를 해줘야 알아듣습니다. 애기보다 더 해요. 점 하나만 틀려도 못알아듣고 스펠 하나만 잘못되도 시키는대로 안하고..

자 이렇게 선을 그었습니다.
한가지 더 팁을 드리면 canvas.strokeStyle = "red"; 를 추가하면 선 색을 빨간색으로 할 수 있습니다.
영어 공부도 할 겸 영어로 정리해 볼까요?
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".

HTML5에는 글자도 타입할 수 있습니다.
그리고 그 글자에 그림자 효과 같은걸 줄 수도 있구요.
배워보겠습니다.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
     
     canvas.shadowOffsetX=4;
     canvas.shadowOffsetY=4;
     canvas.shadowBlur=6;
     canvas.shadowColor='rgba(0,0,255,.5)';

     canvas.font="bold 36px Tahoma";
     canvas.textAlign="end";
     canvas.fillText("Douglas's HTML5 Study",450,100);
 }
 window.addEventListener("load",doFirst,false);

우선 그림자 효과부터 만들어야 합니다. (나중에 만들어도 되지만 하옇든간 글자 뿌려주는 부분보다는 위에 있어야 합니다.)
그림자 효과를 오른쪽으로 4픽셀 아래로 4픽셀인 곳에 주고 번지는 효과는 6 정도로 줍니다. 그리고 색은 rgb(red,green,blue) 중 모두 0으로 하고 blue만 255로 했으니까 파란색이 되구요 그리고 마지막  a(alpha, 투명도)는 .5 로 50% 줍니다.

그 다음은 글자(Text와 관련된 건데요.) 볼드로 36픽셀크기인 글자고 폰트는 Tahoma 폰트 입니다. 그리고 정렬은 end에다 하고 테두리선이 있는 글자가 아니라 안에 색이 채워진 글자로 괄호 안에 있는 글자를 뿌립니다. 그리고 그 다음 숫자들은 글자 위치인 x,y 좌표구요.

Text 와 관련된 요소들부터 정리할 께요.
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".

아래와 같이 코드를 작성해 보세요.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
     
     canvas.shadowOffsetX=4;
     canvas.shadowOffsetY=4;
     canvas.shadowBlur=6;
     canvas.shadowColor='rgba(0,0,255,.5)';

     canvas.font="bold 36px Tahoma";
     canvas.textAlign="start";
     canvas.fillText("Douglas's HTML5 Study",10,100);
     
     canvas.textBaseline = "top";
     canvas.fillText('Top', 10, 200);
     
     canvas.textBaseline = "bottom";
     canvas.fillText('Bottom', 90, 200);
     
     canvas.textBaseline = "middle";
     canvas.fillText('Middle', 200, 200);
     
     canvas.textBaseline = "alphabetic";
     canvas.fillText('Alphabetic', 300, 200);
     
     canvas.textBaseline = "hanging";
     canvas.fillText('Hanging', 400, 200);
 }
 window.addEventListener("load",doFirst,false);

baseLine과 관련된 샘플입니다.

아래는 shadow와 관련된 내용 정리한 겁니다.
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

위 4개 속성은 이미 예제에서 다 사용했습니다.

다음글에도 이어서 계속 canvas에 대해 다루겠습니다.