Geometrie für Canvas 2D

Pfadbau und Winkelrechnung für Canvas 2D. Jede Pfadfunktion baut nur den Pfad; sie ruft niemals fill() oder stroke() auf — wie gemalt wird, entscheidet die aufrufende Seite.

Verwendung

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

Grad in Bogenmaß.

Parameter

Rückgabe

getArcPointerByDeg

Der Punkt auf einem Kreis, der zu einem Winkel gehört.

Parameter

Rückgabe

getTangentByPointer

Die Tangente in einem Punkt auf einem Kreis.

Parameter

Rückgabe

roundRectByArc

Zeichnet ein Rechteck mit abgerundeten Ecken. Ein Eckenradius, der größer ist als die Hälfte der kürzeren Seite, wird auf diese Hälfte begrenzt, sodass benachbarte Ecken sich nie überlappen.

Parameter

Rückgabe

Kein Rückgabewert (void)

fanShapedByArc

Zeichnet ein Tortenstück, samt dem Zwischenraum zu den anderen.

Parameter

Rückgabe

Kein Rückgabewert (void)

getLinearGradient

Übersetzt eine CSS-Zeichenkette linear-gradient(...) in einen CanvasGradient des Canvas.

createLinearGradient nimmt nur einen Anfangs- und einen Endpunkt, während CSS die Richtung als Winkel angibt. Deshalb wird der Kreis in acht Sektoren zu 45° geteilt, und die Tangente rechnet den Winkel wieder in Anfangs- und Endkoordinaten auf dem Rand des Rechtecks um. Richtungen als Schlüsselwort (to top, to bottom, to left, to right) werden unmittelbar behandelt.

Parameter

Rückgabe