http://www.html5canvastutorials.com/tutorials/html5-canvas-element/
html5에서 쓰는 canvas는 <div> <a> <table> 등과 같은 태그 엘레먼트와 같은 것이다.
페이지 로드할 때, 단한번만 호출해 주면된다. 아래 예제이다.
<canvas id="myCanvas"></canvas>
Html5 Canvas Template
<!DOCTYPE HTML> <html> <head> <script> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // do stuff here }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"> </canvas> </body> </html>
DOM오브젝트로 접근한다. context는 GetContext()함수를 호출해서 2d context를 얻어낸다.
덧붙여 말하자면, 그래픽스 해본 사람은 대략 무슨 의미인지, 코드만 봐도 알것이다.
처음 본 사람이라면. context를 화면에 그려줄 메모리 공간이라고 이해하면 된다. 즉 스케치북의 도화지라고 생각하면 이해하기 쉽다. 스케치북의 도화지도 없이 허공에다 그림을 그릴 수 없다.
위 코드는 이제 그림을 그릴 준비를 마친것이다. 화면에는 아무것도 출력되지 않는다.
크기가 ( 넓이 ) 578, ( 높이 ) 200인 흰색 도화지 하나가 준비 됐을 뿐이다.
'프로그래밍 > HTML5' 카테고리의 다른 글
| 1.2.4 HTML5 Canvas Line Cap Tutorial (0) | 2012.01.09 |
|---|---|
| 1.2.3 HTML5 Canvas Line Color Tutorial (0) | 2012.01.09 |
| 1.2.2 HTML5 Canvas line width ( 선 너비 / 굵기 ) 튜토리얼 (0) | 2012.01.09 |
| 1.2.1 HTML5 Canvas Line Tutorial (0) | 2012.01.09 |
| HTML5, JS, Javascript, canvas (0) | 2012.01.09 |