Canvas Basic

Chrome 에서 테스트 합니다.
From. 스마트폰 앱 개발을 위한 HTML5 / 쿠지라 히코즈구에 / 정보문화사.

캔버스의 기본적인 사용방법

캔버스를 사용하여 도형을 그리는 순서

  1. 1. 캔버스 객체를 얻는다.
  2. 2. 캔버스 객체로부터 렌더링 컨텍스트(rendering context)를 얻는다.
  3. 3. 컨텍스트의 메서드 혹은 속성을 이용하여 렌더링한다.


1. 캔버스 객체 얻기

캔버스 기능을 이용하려면 HTML 내에 다음과 같이 <canvas> 태그를 추가 한다.
이때 자바스크립트에서 <canvas> 태그(와 기능)를 참조하기 위해 ID를 부여해 둔다.

							
						

다음으로 document.getElementById() 메서드를 호출하여 <canvas> 태그에 해당하는 캔버스 객체를 얻는다.

							
						

2. 캔버스 객체로부터 렌더링 컨텍스트 얻기

캔버스 객체만 가지고는 도형을 그릴 수 없다. 실제로 렌더링하기 위해서는 캔버스 객체로부터 렌더링 컨텍스트(Rendering Context)를 얻을 필요가 있다.
알기 쉽게 예를 들자면, 캔버스는 종이이고, 렌더링 컨텍스트는 종이에 그림을 그리기 위한 색연필과 같다고 보면 된다. 참고로 컨텍스트란 '문맥' 혹은 '전후관계'를 의미하는데, 프로그래밍의 세계에서는 '무언가를 제어하기 위한 제어 정보'의 의미로 사용되는 경우가 많다(여기서도 '렌더링에 필요한 제어 정보'라는 의미로 사용한다).
캔버스 객체로부터 렌더링 컨텍스트를 얻어 변수 ctx에 저장하려면 다음과 같이 한다.

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

여기서는 컨텍스트의 종류를 '2d'로 지정하였는데, 이는 2차원 그림을 의미한다. 참고로 3차원을 의미하는 '3d'와 구별하기 위해 '2d'라고 지정하는 것일 뿐이며 '3d'렌더링 기능은 지원하지 않는다.

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

컨텍스트를 얻었다면 렌더링 메서드를 호출하여 도형을 그린다. 예를 들어 빨간 사각형을 그리기 위한 HTML은 다음과 같다.

							ctx.fillStyle = "rgb(255,0,0)"; // 배경색 지정
							ctx.fillRect(50,50,200,200); // 사각형 렌더링
						

여기서 fillStyle() 메서드가 색을 지정하는 속성이며, fillRect() 메서드가 사각형을 렌더링하는 부분이다.

캔버스 프로그래밍 시작하기

예제 - 화면에 반투면 사각형 2개를 그리는 프로그램.

							var execBtn = document.getElementById("exec01");
							
							// 페이지 로드시 렌더링하기
							//winddow.onload = function () {
							
							// 클릭이벤트시 렌더링하기
							execBtn.onclick = function () {
								// canvas 얻기
								var canvas = document.getElementById("a_canvas");
								
								// 렌더링 컨텍스트 얻기
								var ctx = canvas.getContext("2d");

								// 렌더링
								ctx.fillStyle = "rgb(255,0,0)";
								ctx.fillRect(50,50,200,200);
								ctx.fillStyle = "rgba(0,0,255,0.5)";
								ctx.fillRect(100,100,200,200);					
							}		
						


색 지정 방법

							ctx.fillStyle = "#FF0000";             // HTML방식
							ctx.fillStyle = "rgb(255,0,0)";        // RGB방식
							ctx.fillStyle = "rgba(255,0,0,0.5)"; // RGB+투명도방식
						

좌표 지정 방법

캔버스에 그림을 그리기 위해서는 좌표를 지정할 필요가 있다. 캔버스의 좌표는 왼쪽 뒤가 (0,0)이고 오른쪽 아래로 갈수록 수치가 늘어나는 방식이며, 단위는 픽셀이다.
한 가지 주의할 점은, iPhone/Android와 같은 스마트폰에서는 사용자가 집기 또는 벌리기(pinch-in/pinch-out:터치 패널을 두 손가락으로 티치한 상태에서 손가락을 오므리거나 펴거나하여 표시 화면을 확대, 축소하는 동작)로 화면의 축소 혹은 확대 조작을 하기 때문에 화면의 척도가 상황에 따라 매번 바뀐다는 점이다. 물론 게임과 같이 화면 척도를 고정해야할 경우에는 뷰퍼트를 사용하여 척도를 고정할 수도 있다.

							ctx.fillRect(50,50,200,200); // x, y, width, height