HTML5 Canvas 기본형태

HTML5 Canvas 기본형태

modernizr-1.6.min.js

<script src="modernizr-1.6.min.js"></script>

<script type="text/javascript">

//html요소와 전체페이지가 먼저 올라왔는지 확인

window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded () {

canvasApp();

}

//코드의 오류나 오류가 일어날수있는 부분을 찾을 수 있게 자바스크립트 콘솔에 로그문자메시지를 남긴다.

//브라우저가 콘솔을 지원한다면 console.log를 사용할수 있다.

//콘솔을 지원하지 않는 브라우저에서는 에러가 나기때문에 console.log를 감싸는 코드를 만들어서 함수를 지원할 때만 사용하게 한다.

var Debugger = function () {};

Debugger.log = function (message) {

try {

console.log(message);

}

catch (exception) {

return;

}

}

//브라우저가 캔버스를 지원하는지 알아보기 modernizr-1.6.min.js

//canvasSupport() 를 호출할때 브라우저가 Canvas를 지원하면 True, 지원하지 않으면 False가 반환된다.

function canvasSupport () {

return Modernizr.canvas;

}

function canvasApp () {

if (!canvasSupport()) {

return;

}

var theCanvas = document.getElementById("canvasOne"); // 캔버스 요소를 참조하기 위해 document 사용하기

var context = theCanvas.getContext("2d"); // 2d 컨텍스트 참조값구하기

Debugger.log("Drawing Canvas"); // Console.log

// 캔버스의 정해진 그리기 영역

function drawScreen() {

context.fillStyle = "#000000";

context.font = "20px _sans";

context.textBaseline = "top";

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

}

drawScreen();

}

</script>