Canvas

Shin Woohyun·2021년 7월 27일

<canvas id="tutorial" width="150" height="150"></canvas>

canvas는 엘리먼트는 고정 크기의 드로잉 영역을 생성하고, (처음 너비는 300 픽셀이고 높이는 150 픽셀)
하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 된다.

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

대체 콘텐츠

<canvas>태그 안에 대체 컨텐츠(설명 혹은 이미지같은)를 삽입합니다.

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

지원여부 검사

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

직사각형 그리기

fillRect(x, y, width, height)
색칠된 직사각형을 그립니다.
strokeRect(x, y, width, height)
직사각형 윤곽선을 그립니다.
clearRect(x, y, width, height)
특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.

경로 그리기

경로는 점들의 집합이며, 선의 한 부분으로 연결되어 여러가지 도형, 곡선을 이루고 두께와 색을 나타내게 된다.

경로를 생성합니다.

그리기 명령어를 사용하여 경로상에 그립니다.

경로가 한번 만들어졌다면, 경로를 렌더링 하기 위해서 윤곽선을 그리거나 도형 내부를 채울수 있습니다.

beginPath() : 새로운 경로를 생성.
Path methods : 문체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수

closePath() : 현재 하위 경로의 시작 부분과 연결된 직선을 추가.
stroke() : 윤곽선을 이용하여 도형을 그림.
fill() : 경로의 내부를 채워서 내부가 채워진 도형을 그림.

펜 이동하기

moveTo(x,y) : pen을 x와 y로 지정된 좌표로 옮깁니다.

선

lineTo(x,y) : 현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.

호(arc)

arc(x, y, radius, startAngle, endAngle, anticlockwise)
: (x,y) 원점, 반지름 r, startAngle ~ endAngle, anticlockwise 방향(기본값은 시계방향 회전)

startAngle 및 endAngle 매개변수는 원의 커브를 따라 호의 시작점과 끝점을 라디안 단위로 정의합니다. 이 변수들은 x축을 기준으로 계산됩니다. (startAngle이 0이면 오른쪽 끝)
각도를 라디안으로 바꾸기 -> radians = (Math.PI/180)*degrees
anticlockwise : true(반시계 방향), false(기본, 시계방향)
arcTo(x1, y1, x2, y2, radius)
: 주어진 제어점들과 반지름으로 호를 그리고, 이전 점과 직선으로 연결합니다.