Hi Hi

'canvas 메서드'에 해당되는 글 1건

  1. HTML5 컨버스의 기초

HTML5 컨버스의 기초

 


컨버스(Canvers)는 표준 HTML과 자바스크립트만으로 도형을 그릴 수 있도록 해주는 HTML5의 신기능으로 많은 주목을 받고 있다.

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

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

컨버스 객체 얻기
컨버스 기능을 이용하려면 HTML 내에 다음과 같이 <canves> 태그를 추가한다. 이때 자바스크립트에서 <canvers> 태그를 참조하기 위해 태그에 ID를 부여해 둔다.

 <canvers id ="a_canvas" width="300" height="300"></canvas>
 <script type="text/javascript">
 var canvas = doucument.getElementById("a_canvers");
 //..
 </script>

캔버스 객체로부터 렌더링 컨텍스트 얻기
실제로 렌더링하기 위해서는 캔버스 객체로부터 렌더링 컨텍스트를 얻을 필요가 있다.
캔버스는 종이이고, 렌더링 컨텍스트는 종이에 그림을 그리기 위한 색연필과 같다고 보면 된다.

캔버스 객체로부터 렌더링 컨텍스트를 얻어 변수 ctx에 저장하려면 다음과 같이 한다.
var ctx = canvas.getContext("2d")

컨텍스트의 종류, '2d' 이차원 그림을 의미한다. 

렌더링 컨텍스트의 메서드 및 속성을 이용하여 렌더링 하기
컨텍스트를 얻었다면 렌더링 메서드를 호출하여 도형을 그린다.
ctx.fillStyle="rgb(255,0,0)";
ctx.fillRect(50, 50, 200,200);

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

컨버스 프로그래밍 시작하기
<!DOCTYPE html >
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title> HTMP5 canvas</title>
</head>
<body>
 <!--canvas 정의 -->
 <canvas id ="a_canvas" width="300" height="300"></canvas>
 <script type="text/javascript">
 //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);
 
 </script></body>
</html>



색 지정 방법

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


좌표 지정 방법
컨버스의 좌표는 왼쪽 위가 (0,0)이고 오른쪽 아래로 갈수록 수치가 늘어나는 방식이며, 단위는 픽셀이다.


다각형 렌더링

삼각형 렌더링

1. 캔버스의 렌더링 컨텍스트를 얻는다.
2. beginPath() 메서드로 패스를 초기화 한다.
3. moveTo() 메서드, lineTo() 메서드를 사용하여 좌표를 지정한다.
4. closePath() 메서드로 패스 지정을 종료한다.
5. fill() 메서드로 삼각형을 렌더링 한다.

<body>
 <!--canvas 정의 -->
 <canvas id ="canvas" width="300" height="300"></canvas>
 <script type="text/javascript">
 //canvas 얻기
 var canvas = document.getElementById("canvas");
 // 렌더링 컨텍스트 얻기
 var ctx = canvas.getContext("2d");
 //패스 지정시작
 ctx.beginPath();
 //패스 지정
 ctx.moveTo(0,0);
 ctx.lineTo(0.290);
 ctx.lineTo(290,290);
 //패스 지정 종료
 ctx.closePath();
 //렌더링
 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fill();
  
 </script></body>
</html>


패스 렌더링 관련 메서드

  메서드 기능 
 beginPath()   패스 지정을 초기화 한다.
 closePath()   현재 까지 지정한 패스를 닫는다.
 moveTo(x,y)   렌더링 시작점을 (x,y)로 지정한다.
 line(x,y)   이전 렌더링 위치에서 (x,y)로 선을 긋는다.
 stroke()   패스(테드리)를 렌더링 한다
 fill()   패스 내부를 채운다.
 fillStyle   패스 내부를 채운다.
 strokeStyle()   패스 선의 색 및 스타일을 지정한다.
 lineWidth   패스 선의 굵기를 지정한다.


[출처:스마트폰 앱 개발을 위한 HTML 5(아이폰/아이패드/안드로이드)]


'' 카테고리의 다른 글

HTML5 동영상 재생  (0) 2012.01.14
HTML5 개발툴 소개  (0) 2012.01.11
HTML5 컨버스의 기초  (0) 2012.01.09
HTML5 프로그래밍의 기초  (0) 2012.01.07
HTML5의 새로운기능  (1) 2012.01.05
HTML5 에 새로운 태그 4가지  (0) 2011.10.29