[JavaScript] 캔버스에 도형 그리기

캔버스 생성하기

<canvas id="캔버스 객체 id" 
        style="CSS3스타일 시트" 
        width="캔버스 영역 폭" 
        height="캔버스 영역 높이">
	이 태그를 지원하지 않는 브라우저가 출력할 HTML 텍스트
</canvas>

 

캔버스객체를 생성한 후 <canvas> 태그를 찾아 DOM 객체를 얻어낸다. 그리고 캔버스 객체로부터 그림을 그리는 도구(rendering tool)을 얻어낸다. 이 도구를 캔버스 컨텍스트(context)라고 한다.

/* Script */
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

• getContext("2d") : 2차원 그래픽에 사용되는 프로퍼티와 메소드를 가진 CanvasRenderingContext2D 타입의 객체이다.

 

<컨텍스트 객체의 프로퍼티>

strokeStyle	선 색
fillStyle	채우기 색
lineWidth	도형의 선 두께. 픽셀 단위
font	텍스트 폰트
textAlign	텍스트 정렬 방식
lineCap	선의 양쪽 끝 모양 지정. butt(디폴트), round, squar
lineJoin	선이 꺾이는 모서리 모양 지정. miter(디폴트), round, bevel

 

선

// 1 픽셀의 blue 직선 그리기
context.beginPath();
context.moveTo(20, 20);
context.lineTo(150, 50);
context.strokeStyle = "blue";
context.stroke();

 

 

사각형

// 10 픽셀 yellowgreen 사각형 그리기
context.beginPath();
context.rect(20, 80, 120, 50);
context.lineWidth = 10; // 선 굵기 10픽셀
context.strokeStyle = "yellowgreen"; // 선 색
context.stroke();

// fillRect()로 외곽선 없이 색으로 채운 사각형 그리기
context.fillStyle = "violet";
context.fillRect(20, 20, 100, 100);

// fill()로 사각형 내부 칠하기
context.beginPath();
context.rect(20, 150, 100, 100); // 경로에 사각형 삽입
context.fillStyle = "violet";
context.fill();

// 사각형 외곽선 그리기
context.strokeStyle = "gray";
context.lineWidth = 10;
context.stroke();

 

원호

// 20 픽셀의 violet 색 원호 그리기
context.beginPath();
context.arc(80, 220, 50, 0, 1.5*Math.PI, false);
context.lineWidth = 20; // 선 굵기 20픽셀
context.strokeStyle = "violet"; // 선 색
context.stroke();

// fill()로 원호 내부 칠하기
context.beginPath();
context.moveTo(80, 340); // 원호의 중심을 시작점으로 설정
context.arc(80, 340, 50, 0, 1.5*Math.PI); // 경로에 원호 삽입
context.closePath(); // 원호의 끝점과 경로 시작점(원호중심)을 연결하는 직선 자동 추가
context.fillStyle = "yellowgreen";
context.fill();	// 원호 내부 칠하기

// 원호 외곽선 그리기
context.strokeStyle = "gray";
context.lineWidth = 20;
context.stroke();

 

 

곡선