Canvas 2D 기하

Canvas 2D를 위한 경로 만들기와 각도 계산입니다. 경로를 만드는 함수는 모두 경로를 짜기만 할 뿐, fill()도 stroke()도 부르지 않습니다. 어떻게 칠할지는 부르는 쪽이 정합니다.

사용법

import { roundRectByArc, getLinearGradient } from 'ranuts/utils';

const ctx = canvas.getContext('2d')!;

roundRectByArc(ctx, 10, 10, 200, 80, 12);
ctx.fillStyle = getLinearGradient(ctx, 10, 10, 200, 80, 'linear-gradient(90deg, #06f, #0cf)');
ctx.fill();

API

getAngle

도를 라디안으로 바꿉니다.

매개변수

매개변수	설명	타입	기본값
deg	도로 나타낸 각	number	필수

반환값

인자	설명	타입
rad	라디안으로 나타낸 각	number

getArcPointerByDeg

원 위에서 그 각에 해당하는 점입니다.

매개변수

매개변수	설명	타입	기본값
deg	라디안으로 나타낸 각	number	필수
r	반지름	number	필수

반환값

인자	설명	타입
point	[x, y]	[number, number]

getTangentByPointer

원 위 한 점에서의 접선입니다.

매개변수

매개변수	설명	타입	기본값
x	x 좌표	number	필수
y	y 좌표	number	필수

반환값

인자	설명	타입
line	[기울기, 절편]	Array<number>

roundRectByArc

모서리가 둥근 직사각형을 그립니다. 짧은 변의 절반보다 큰 모서리 반지름은 그 절반으로 죄어지므로, 이웃한 모서리끼리 겹치는 일이 없습니다.

매개변수

매개변수	설명	타입	기본값
ctx	캔버스의 2D 컨텍스트	CanvasRenderingContext2D	필수
...rest	x, y, w, h, r	number[]	필수

반환값

반환값 없음(void)

fanShapedByArc

부채꼴 한 조각을 그립니다. 조각 사이의 틈까지 함께요.

매개변수

매개변수	설명	타입	기본값
ctx	캔버스의 2D 컨텍스트	CanvasRenderingContext2D	필수
maxRadius	바깥쪽 반지름	number	필수
start	시작 각(라디안)	number	필수
end	끝 각(라디안)	number	필수
gutter	조각 사이 틈의 너비	number	필수

반환값

반환값 없음(void)

getLinearGradient

CSS의 linear-gradient(...) 문자열을 캔버스의 CanvasGradient로 옮깁니다.

createLinearGradient이 받는 것은 시작점과 끝점뿐인데 CSS는 방향을 각으로 적습니다. 그래서 원을 45도씩 여덟 부채꼴로 나누고, 탄젠트로 그 각을 직사각형 테두리 위의 시작·끝 좌표로 되돌립니다. 낱말로 적은 방향(to top, to bottom, to left, to right)은 곧바로 다룹니다.

매개변수

매개변수	설명	타입	기본값
ctx	캔버스의 2D 컨텍스트	CanvasRenderingContext2D	필수
x	직사각형 왼쪽 위 모서리의 x	number	필수
y	직사각형 왼쪽 위 모서리의 y	number	필수
w	직사각형의 너비	number	필수
h	직사각형의 높이	number	필수
background	예: linear-gradient(90deg, red, blue)	string	필수

반환값

인자	설명	타입
gradient	fillStyle이나 strokeStyle에 그대로 넣을 수 있습니다	CanvasGradient

WARNING

색 정지점에는 단위를 붙일 수 없습니다(red 0, blue 1처럼 씁니다). 백분율로 적으면(red 50%) 파싱 결과가 NaN이 되어 addColorStop이 예외를 던집니다.