[쉽게 배우는 H.C.J] Chapter 6 - Canvas

캔버스 : 각종 도형, 문자열 및 그림을 그릴 수 있는 메서드 제공

<canvas id ="ID" width ="너비" height ="높이"></canvas>

자바스크립트에서 제어하기 위해 id 속성 필수

구역을 지정하는 <div> 태그와 같이 쓰이면 좋다.

 

HTML5의 <canvas> 태그는 그래픽을 그릴 영역만 제공하고, 실제로는 그래픽을 그리기 위해 자바스크립트를 사용한다.

만들어진 캠버스에 도형이나 그림을 그리고, 그려진 것들을 움직이게 만드는 등의 제어는 JS에서 담당

JS는 HTML 페이지가 모두 로드된 후에 사용. 

캔버스를 제어하는 코드는 $(document).ready(function() { } 안에 작성!

 

자바스크립트에서 캔버스를 제어하기 위해서는 그림이 그려질 캔버스 영역을 var cvs = $("#canvas1")[0];와 같이 사용해서 얻어낸 후 그리기 작업을 위한 그래픽 2D 콘텍스트를 cvs, getContext("2d");과 같은 방법으로 얻어내서 한다.