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

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

매개변수

반환값

getArcPointerByDeg

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

매개변수

반환값

getTangentByPointer

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

매개변수

반환값

roundRectByArc

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

매개변수

반환값

반환값 없음(void)

fanShapedByArc

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

매개변수

반환값

반환값 없음(void)

getLinearGradient

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

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

매개변수

반환값