HTML5 Canvas Line1

HTML5 Canvas 강좌를 시작해보고자 한다.

첫 번째 주제는 Canvas Line이다.

Canvas 브라우저 지원 현황

(출처 : http://www.findmebyip.com/litmus)

우선 Line을 그리기 위하여 Canvas 엘리먼트를 만들자.

9라인은 Canvas 엘리먼트의 마크업 형식이며 초기에는 아무 내용도 없고 경계선도 없다.
Canvas에 접근하기 위한 id속성과 Canvas크기를 width와 height를 각각 지정하였다.
5번라인은 DOM에서 Canvas 엘리먼트를 찾게 되며 모든 Canvas는 드로잉 컨텍스트를 갖으며
6번라인은 Canvas에 대해 getContext() 메소드를 호출할 수 있다. 이때 "2d"라는 문자열을 getContext()
메소드에 넘겨줘야 한다.

여기까지가 앞으로 모든 Canvas 예제를 하기 위한 준비과정이다.
이제 오늘의 주제인 Line을 한번 그려보자.

HTML5에서는 Line을 그리기 위하여 lineTo, moveTo, stroke 메서드를 지원한다. 각 메서드에 대한 설명을 아래와 같다.

context.moveTo(x,y);  //x,y좌표로 이동


context.lineTo(x,y);     //x,y좌표까지 선을 이동


context.stroke();         //선을 그려라

위 메서드를 이용하여 선을 그려보자.

위 소스를 실행항 브라우저는 아래와 같은 실행화면이다.

실행순서는 아래 이미지와 같다.
moveTo메서드를 이용하여 30,50좌표로 이동한 후 lineTo메서드를 이용하여 400,50좌표, 30,100좌표를
순차적으로 이동한다. 그리고 stroke메서드를 이용하여 선을 그리게 된다.
여기서 중요한 점은 stroke메서드를 사용하지 않으면 Canvas는 선이 나타나지 않는 점이다.

그렇다면 별을 한번 그려보자.

 

조금 엉성한 별 모양이기는 하지만 위 소스의 결과물은 아래와 같다.