Geometría para Canvas 2D

Constructores de trazado y cuentas de ángulos para Canvas 2D. Toda función de trazado solo construye el trazado; nunca llama a fill() ni a stroke(), así que quien la usa decide cómo pintarlo.

Uso

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

De grados a radianes.

Parámetros

Devuelve

getArcPointerByDeg

El punto de una circunferencia que corresponde a un ángulo.

Parámetros

Devuelve

getTangentByPointer

La recta tangente en un punto de una circunferencia.

Parámetros

Devuelve

roundRectByArc

Traza un rectángulo de esquinas redondeadas. Un radio mayor que la mitad del lado más corto se recorta a esa mitad, de modo que dos esquinas contiguas nunca se solapan.

Parámetros

Devuelve

Sin valor de retorno (void)

fanShapedByArc

Traza una porción de tarta, con el hueco que la separa de las demás.

Parámetros

Devuelve

Sin valor de retorno (void)

getLinearGradient

Traduce una cadena linear-gradient(...) de CSS a un CanvasGradient de Canvas.

createLinearGradient solo admite un punto inicial y uno final, mientras que CSS describe la dirección como un ángulo. Por eso la circunferencia se parte en ocho sectores de 45° y la tangente convierte el ángulo de vuelta en coordenadas de inicio y fin sobre el borde del rectángulo. Las direcciones por palabra clave (to top, to bottom, to left, to right) se tratan directamente.

Parámetros

Devuelve