본문 바로가기

후비고!

HTML5 Canvas 배우기 - 1

기본 서적은 'HTML5 Canvas' 이다.

 

1. 개발환경. (크롬이나 파폭으로 하자, 고로 Canvas Validation은 하지 않는다.)
지긋지긋한 개발 환경으 건너뛰자. eclipse내 dynamic webproject 로 생성 후(난 톰캣을 사랑해!), 구조는 밑의 그림과 같다. 



2. 우선 필요한건 뭐? 당연히 canvas 엘리먼트겠지.

<div style="position: absolute; top: 50px; left: 50px;">

    <canvas id="myCanvas" width="500" height="300">

    </canvas>

</div>



3. 자. 비싸지 않은 캔버스가 우리에게 주워졌다. 늘 그렇지만 HelloWorld를 보여줘야 하지 않겠는가.? 결과는 다음과 같지 않겠는가?



4. 그럼 본격적으로 만들기 전에 트렌드에 맞게 javascript 라이브러리도 쓰면서 만들어 보는거다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

로컬에 놓고 쓰려니 다운도 받아야 하고해서 구글느님께 좀 빌려쓰기로 하자.

자바스크립트 코딩방식은 'JavaScript Patterns'를 따른다. 

우선 MyCanvas라는 Object를 만들어 보자.

(function($){

    MyCanvas = function(){
    }
})(JQuery) 


canvas context를 object내 전역에 만들어 둔다.

...
MyCanvas = function(){

    MyCanvas.prototype.myCanvas = document.getElementById("myCanvas");

    MyCanvas.prototype.context = this.myCanvas.getContext("2d");

};
... 


자, 이제 canvas를 가지고 놀 Object와 변수 설정이 끝났다. 그럼 이제 canvas의 배경과 글자를 넣어보자.

MyCanvas.prototype = {
    drawBackground : function(){

        var that = this;

        that.context.fillStyle = "#ffffaa";

        that.context.fillRect(0, 0, 500, 300);

    },
    drawText : function(){

        var that = this;

        that.context.fillStyle = "#000000";

        that.context.font = "20px _sans";

        that.context.textBaseline = "top";

        that.context.fillText("Hello World!", 195, 80);

    }
}


그럼 실행해 볼까?

$(document).ready(function(){

    var myCanvas = new MyCanvas();

    myCanvas.drawBackground();

    myCanvas.drawText();

});


결과




오~ 멋지다. 좀 더 멋지게(책에 나온 예제대로 아웃라인을 넣어보자)

drawOutline : function(){
    var that = this; 
    that.context.lineWidth = "10"; 

    that.context.strokeStyle = "#000000";

    that.context.strokeRect(15, 15, 470, 270);

}
....

myCanvas.drawOutline(); 


결과는


각 canvas의 API 설명은 

http://msdn.microsoft.com/en-us/library/hh826010%28v=vs.85%29.aspx

https://developer.mozilla.org/ko/Canvas_tutorial 

참조하자. 다음 페이지는 'Guess The Letter' 만들기군.