336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
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 요소는 기본적으로 테두리나 배경선을 가지고 있지 않기 때문에 스타일시트를 이용해서 테두리 경계선을 넣어주었습니다.
그리고 canvas 요소는 기본적으로 테두리나 배경선을 가지고 있지 않기 때문에 스타일시트를 이용해서 테두리 경계선을 넣어주었습니다.
'공부 > HTML5' 카테고리의 다른 글
| Canvas3 선 긋기 (0) | 2011.11.05 |
|---|---|
| Canvas2 사각형 그리기 (0) | 2011.11.04 |
| 시멘틱 웹 [semantic web] (0) | 2011.11.04 |
| 블록레벨 요소와 인라인 요소 (0) | 2011.11.04 |
| HTML5 (0) | 2011.10.29 |
댓글