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' 만들기군.