Canvas Advanced1

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

** 패스 렌더링 관련 메서드 **

1. 패스 조작용 메서드

패스 조작용 메서드
메서드 기능
beginPath() 패스 지정을 초기화한다.
closePath() 현재까지 지정한 패스를 닫는다.
moveTo(x,y) 렌더링 시작점을 (x, y)로 지정한다.
lineTo(x, y) 이전 렌더링 위치에서 (x, y)로 선을 긋는다.

2. 패스 렌더링용 메서드

패스 렌더링용 메서드
메서드 기능
stroke() 패스(테두리)를 렌더링한다.
fill() 패스 내부를 채운다.

3. 렌더링 스타일을 지정하는 속성

렌더링 스타일을 지정하는 속성
메서드 기능
fillStyle 패스 내부를 채울 때 사용되는 색 및 스타일을 지정한다.
strokeStyle 패스 선의 색 및 스타일을 지정한다.
lineWidth 패스 선의 굵기를 지정한다.


1. 삼각형 렌더링

삼각형을 그리는 순서

  1. 1. 캔버스 객체의 렌더링 컨텍스트(rendering context)를 얻는다.
  2. 2. beginPath() 메서드로 패스를 초기화한다.
  3. 3. moveTo() 메서드, lineTo() 메서드를 사용하여 좌표를 지정한다.
  4. 4. closePath() 메서드로 패스(path) 지정을 종료한다. cf. path(경로) - 도형의 테두리를 의미
  5. 5. fill()메서드로 삼각형을 렌더링한다.


								var execBtn = document.getElementById("exec01");
								execBtn.onclick = function () {
									// canvas 얻기, rendering context 얻기 ----------------------------(1)
									var canvas = document.getElementById("canvas");
									var ctx = canvas.getContext("2d");
									
									// 패스 지정 시작 -------------------------------------------------(2)
									ctx.beginPath();
									
									// 패스 지정 ------------------------------------------------------(3)
									ctx.moveTo(5,5); // 시작점으로 이동 5,5
									ctx.lineTo(5,295); // y축으로 선긋기
									ctx.lineTo(295,295); // x축으로 선긋기

									// 패스 지정 종료 --------------------------------------------------(4)
									ctx.closePath(); 

									// 렌더링 ----------------------------------------------------------(5)
									ctx.fillStyle = "rgb(200,0,0)";
									ctx.fill();
								}			
						
  1. (1)에서는 캔버스로부터 렌더링 컨텍스트를 얻어 변수 ctx에 저장한다. 이후 처리에서는 이 ctx를 이용하여 렌더링 메서드를 호출하게 된다.
  2. (2)에서 beginPath() 메서드를 호출하여 패스 시작을 선언하고
  3. (3)에서 삼각형의 패스를 지정한다. 우선 moveTo() 메서드로 좌표의 시작점을 지정한 후, lineTo() 메서드로 선을 긋고
  4. (4)에서 경로 지정을 종료한다.
  5. (5)에서 fill() 메서드를 호출하여 삼각형을 렌더링 한다 (참고로 4의 closePath() 메서드는 생략할 수 있다).






2. 터치한 곳에 직각삼각형 그리기

							// canvas 얻기, rendering context 얻기
							var canvas2 = document.getElementById("canvas2");
							var ctx = canvas2.getContext("2d");

							// 캔버스에 이번트를 설정
							canvas2.onmousedown = function  (event) {
								// 터치한 좌표 얻기
								var x = event.x;	
								var y = event.y;
								var r = Math.random()*10+5;

								// 패스 지정
								ctx.beginPath();
								ctx.moveTo(x,y);
								ctx.lineTo(x, y+r);
								ctx.lineTo(x+r, y+r);
								ctx.lineTo(x, y);

								// 렌더링
								ctx.strokeStyle = "red";
								ctx.stroke();
							};	
						


3. 무작위 다각형 그리기

							// canvas 얻기, rendering context 얻기
							var canvas = document.getElementById("canvas");
							var ctx = canvas.getContext("2d");

							// 랜덤하게 다각형을 50개 그린다
							for (var i=0; i< 50; i++) {
								randomDraw();
							}

							// 지정한 범위의 난수를 반환하는 함수
							function randomI (nForm, nTo) {
								var f = nTo -nForm+1;
								return Math.floor(Math.random()*f) + nForm;
							}

							// 랜덤하게 다각형을 그리는 함수

							function randomDraw () {
								// 패스 지정
								ctx.beginPath();

								// 꼭지점의 수는 랜덤하게
								var n = randomI(2, 7);
								ctx.moveTo(randomI(0, canvas.width), randomI(0, canvas.height));
								for (var i=0; i< n; i++) {
									ctx.lineTo(randomI(0, canvas.width), randomI(0, canvas.height))
								}
								ctx.closePath();

								// 렌더링
								ctx.fillStyle = "#"+randomI(0, 0xFFFFFF).toString(16);
								ctx.fill();
							}