Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

canvas

HTML5는 <canvas> 앨리먼트가 정의되어 있다. canvas를 이용해서 그래픽 랜더링, 게임 그래픽 기타 비쥬얼 효과를 만들 수 있다.

캔버스는 다음과 같이 만든다.
<canvas width="300" height="225" style="border:1px dotted;float:left"></canvas>

캔버스는 빈 상태로 시작된다. 무언가를 그려 넣어 보자.

여기를 클릭하면..
캔버스에 사각형을 그리기 위해서 다음과 같은 스크립트를 만들었다.

<script>
function draw_b () {
  var b_canvas = document.getElementById ("b");
  var b_context = b_canvas.getContext ("2d");
  b_context.fillRect (50, 25, 150, 100);
}
</script>
getElementByid로 DOM 안에서 canvas를 찾아낸다. 그 후 getContext 메서드를 호출해서 캔버스를 제어하기 위한 문맥을 얻어낸다.

사각형은 fillRect 메서드로 만든다.

canvas 좌표계