본문 바로가기

HTML5

[그래픽 처리] 캔버스의 기초/렌더링 컨텍스트

[그래픽 처리] 캔버스의 기초

HTML5의 신기능인 캔버스를 사용하면 도형을 그릴수 있습니다.
HTML에 <canvas>태그를 추가하고 캔버스 내에 도형을 렌더링하면 캔버스를 사용할 수 있습니다.
도형을 그리는 순서를 소개하겠습니다.

1. 캔버스 객체를 얻습니다.

자바스크립트에서 <canvas> 태그와 그 기능을 참조하기 위해 태그에 ID를 부여해 둡니다.

<canvas id="a_canvas" width="300" height="300"></canvas>


document.getElementById() 메서드를 호출해 <canvas> 태그에 해당하는 캔버스 객체를 얻고 인수를 지정합니다.

<script type="text/javascript">
var canvas = document.getElementById(" 인수지정 여기선 'a_canvas' ");
//..
</script>


2. 캔버스 객체로부터 렌더링 컨텍스트(Rendering Context)를 얻습니다.

렌더링 컨텍스트는 종이에 그림을 그리기 위한 색연필과 같습니다.
다음과 같이 캔버스 객체로부터 렌더링 컨텍스트를 얻어 변수 ctx에 저장합니다.
컨텍스트 종류에 따라 그림의 형태가 달라지는데 '2d'는 2차원, '3d'는 3차원을 의미합니다.
이것은 구분하기 위한 것이므로 실제로 '3d'렌더링 기능은 지원하지 않습니다.

var ctx = canvas.getContext("2d");


3. 렌더링 컨텍스트의 메서드 및 속성을 이용하여 렌더링합니다.

fillStyle() : 색지정 속성 메서드
fillRect() : 사각형을 렌더링하는 메서드


예제로 반투명 사각형 2개를 그리는 프로그램을 작성해 보았습니다.


스마트폰 실행 결과 다음과 같이 나타나게 됩니다.