캔버스 기능

김예슬·2023년 4월 28일

캔버스 기능 => HTML5

소스코드를 활용해서 그림을 그릴 수 있는 기능 부여

자바스크립트에서 캔버스 기능을 사용하려면 HTML에

1) 캔버스 태그를 설정해준다

전체화면 채우기

2) 컨텍스트를 설정해준다

컨텍스트 개념: 프로그램에 특정 실행문을 호출하고 응답받을 수 있는 준비를 해놓은 상태

//이제 우리는 그림을 그릴거야 라는 뜻

일상생활에서 사용하는 각도 개념 degree

컴퓨터 프로그래밍 개발 시, 사용하는 각도 개념 radian

radian = 180도 / 파이(*원주율)

1도 = 파이 / 180
90도 = Math.PI 0.5
180도 = Math.PI
270도 = Math.PI 1.5
360도 = 0도 = Math.PI * 2

역시계방향 -90도

ex) (Math.PI / 180) * 60 이렇게 하면 60도

사각형을 그리는 메서드

1) fillRect (x, y, width, height) : 색상을 채우는 사각형을 만들 때
2) strokeRect (x, y, width, height) : 테두리가 있는 사각형을 만들 때
3) clearRect (x, y, width, height) : 특정 위치 및 사이즈의 사각영역을 지울 때

삼각형을 그리는 메서드

1) beginPath() : 사각형을 제외한 나머지 도형을 그리기 위한 첫번째 시그널
2) closePath() : 사각형을 제외한 나머지 도형을 그렸다는 마지막 시그널
3) lineTo(x, y) : 시작점에서부터 (x, y)좌표값까지 직선 경로를 만들겠다고 선언하는 메서드
4) moveTo(x, y) : 도형을 그릴 때, 시작점을 정의하는 메서드
5) stroke() : 선에 대한 경로 성정 후 해당 메서드를 반드시 입력해야만 나타난다.
6) fill() : 배경설정 후 해당 메서드를 반드시 입력해야만 배경에 나타난다.

원 및 호를 그리는 메서드

arc(x, y, r, starAngle, endAngle, counterClockwise);
x,y : 원의 중심
r : 원의 반지름
startAngle : 시작이 될 radian 값
endAngle : 끝이 될 radian 값
counterClockwise : 반시계 방향으로 도는 것을 기본값을 인식합니다.
tru: 반시계 false: 시계

반원 그리는 방법

//좌표값만 다른 경우에는 이렇게 같이 써도 문제 없다.

선으로 반원 그리는 방법

선으로 호 그리는 방법

타원을 그리는 메서드

타원을 그리는 첫번째 방법(정석)

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterClockwise);
x, y : 타원의 중심
radiusX, radiusY : 타원의 가로 및 세로 반지름
rotation : 타원의 회전각도
startAngle : 시작이 될 radian 값
endAngle : 끝이 될 radian 값
counterClockwise : 반시계 방향으로 도는 것을 기본값을 인식합니다.
tru: 반시계 false: 시계

타원을 그리는 두번째 방법

기본적인 정원의 사이즈 변경을 통해서 가능
scale(x, y);

이 경우 scale로 반원을 만들 경우 scale 위치에 따라 적용이 다르다.

곡선을 그리는 방법

:베지에 Bezier
-2차 베지에 곡선 (조절점이 1개)

quardraticCurveTo(cpx, cpy, x, y)
cpx, cpy : 조절점 좌표
x, y :곡선이 끝나는 좌표
-3차 베지에 곡선 (조절점이 2개)

3차 베지에 곡선(조절점이 2개)

bezierCurveTo(cpx1, xpx2, cpy2, x, y)

삼각형 예제

개구리 예제

캔버스 텍스트 그리기

fillText (text, x, y)
strokeText (text, x, y)

:text = 캔버스에 그릴 텍스트를 의미
: x,y = 텍스트를 표사헐 좌표를 의미

캔버스에 이미지 표시하기

drawImage (image, dx, dy)
drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh)
image = 캔버스에 표시할 이미지 객체 타입
dx, dy : 캔버스 좌측 상단으로부터 얼마나 떨어진 지점에 표시할 것인가를 묻는 좌표값
=> 내장객체를 사용!!