DOM
그림을 그리고자 하는 위치에 canvas 엘리먼트를 선언한다.
canvas 엘리먼트 역시 DOM 엘리먼트이므로 CSS, javascript에서 모두 검색이 가능하다.
|
<body onload="draw()"> .... <canvas id="draw" width="150px" height="150px" /> .... </body> |
javascript
canvas의 99%는 모두 자바스크립트로 처리된다.
앞으로 html의 canvas엘리먼트에 대한 코드는 특별한 경우가 아닐 경우 모두 생략될 예정이다.
|
function draw(target) { var canvas = document.getElementById("draw");
// 지원 여부 체크 if(canvas.getContext) { // HTML5에서 canvas를 지원시
// 그리기 오브젝트를 받음 var ctx = canvas.getContext('2d');
// 그리기 ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(10, 10, 90, 90); } } |
canvas로 그려지는 그림은 최대 canvas 엘리먼트의 크기만큼 출력되며,
canvas 엘리먼트의 좌상단을 기준으로 (0, 0)이 설정되며 우하단으로 갈수록 좌표크기가 커지는 구조이다.
결과
아래와 같이 사각형이 뜬다면 올바르게 작성된 프로그램이다.
