공부/HTML5

Canvas1 그림 그리기 준비

Ohming 2011. 11. 4. 23:28
1. 페이지가 로드되면 캔버스에 그림이 그려지도록 준비 완료
 <!DOCTYPE HTML>
<html>
    <head>
    <title>Canvas 공부</title>
        <script type="text/javascript">
            var make_canvas = function(){    //페이지가 열리자마자 호출될 make_canvas 함수
            var exam = document.getElementById('exam');
            var ctx = exam.getContext('2d');
        };
        </script>
        <style type = "text/css">
            #exam { border : 1px solid #000000; }
        </style>
    </head>
    <body onload = "make_canvas();">
        <canvas id = "exam" width = "200" height = "200"></canvas>
    </body>
</html>
결과 화면 :

아직은 본격적으로 그림을 그리지 않은 상태라서 검정색 박스 하나만 나타난다.
그리고 canvas 요소는 기본적으로 테두리나 배경선을 가지고 있지 않기 때문에 스타일시트를 이용해서 테두리 경계선을 넣어주었습니다.