Path2D

Die Klasse Path2D besitzt die selben Methoden wie der übliche Path2D von Canvas2D: und einige weitere Methoden.

addPath(Path2D P, Matrix transform):
Fügt dem aktuellen Pfad einen Pfad hinzu.
Beispiel von einem Pfad2D in WebGL:

closePath():
Bewirkt, dass die Spitze des Stifts zum Anfang des aktuellen Unterpfads zurückkehrt. Es wird versucht, eine gerade Linie vom aktuellen Punkt bis zum Start zu ziehen. Wenn die Form bereits geschlossen wurde oder nur einen Punkt hat, führt diese Funktion nichts aus.

moveTo(float x, float y):
Verschiebt den Startpunkt eines neuen Unterpfads zu den ( x, y) -Koordinaten.

lineTo(float x, float y):
Verbindet den letzten Punkt im Unterpfad mit den ( x, y) -Koordinaten mit einer geraden Linie.

bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y):
Fügt dem Pfad eine kubische Bézier-Kurve hinzu. Es erfordert drei Punkte. Die ersten beiden Punkte sind Kontrollpunkte und der dritte ist der Endpunkt. Der Startpunkt ist der letzte Punkt im aktuellen Pfad, der durch moveTo() vor dem Erstellen der Bézier-Kurve geändert werden kann.

quadraticCurveTo(float cpx, float cpy, float x, float y):
Fügt dem aktuellen Pfad eine quadratische Bézier-Kurve hinzu.

arcTo(float x1, float y1, float x2, float y2, float radius):
Fügt dem Pfad einen Kreisbogen mit den angegebenen Kontrollpunkten und dem angegebenen Radius hinzu, der durch eine gerade Linie mit dem vorherigen Punkt verbunden ist. Ist radius zu groß, so wird nichts gezeichnet.

ellipse(float x, float y, float radiusX, float radiusY, float rotation, float startAngle, float endAngle, bool anticlockwise):
Fügt dem Pfad einen elliptischen Bogen hinzu, der an der x, y Position zentriert ist mit den Radien radiusX und radiusY. Beim startAngle beginnt der Bogen und bei endAngle endet der Bogen. Die Orientierung ist durch anticlockwise festgelegt. (standardmäßig im Uhrzeigersinn).

rect(float x, float y, float width, float height):
Erstellt einen Pfad für ein Rechteck an Position x, y mit einer Größe, die durch width und height bestimmt wird.

arc(float x, float y, float radius, float startAngle, float endAngle, bool anticlockwise):
Fügt dem Pfad einen Bogen hinzu, mit dem Mittelpunkt x, y und dem radius. Er beginnt beim startangle und endet beim endAngle (standardmäßig im Uhrzeigersinn).

Dies ergibt folgendes Ergebnis:

Weitere Methoden
stroke():
Zeichnet die Linie des Pfades mit der Breite, die in WebDevice.LineWidth gesetzt ist. Sie ist standardmäßig = 1. Die Farbe ist WebDevice.Emission. Es wird WebDevice.lineCap (standard ist LineJoin.round.), WebDevice.lineJoin und WebDevice.MiterLimit (Standard ist 1) verwendet.

fill():
Füllt den Pfad mit der Emission-farbe, die in WebDevice.Material gesetzt ist.

beginPath():
Erstellt einen neuen Unterpfad. Die aktuelle Position bleibt unverändert.

Bemerkung
Die bekannten Transformationen von Canvas2D können direkt in der WebDevice erledigt werden:

translate:

var translationx = 3; 
var translationy = 1;
WebDevice.MulMatrix(Matrix.Translation(new xyz(translationx, translationy, 0)));

rotate:

var angle =20 * Math.PI / 180;
var centerx = 10;
var centery = 10;
WebDevice.MulMatrix(Matrix.Rotation(new xyz(centerx, centery, 0), new xyz(0, 0, 1), angle));

scale:

var scalex = 2;
var scaley = 3;
WebDevice.MulMatrix(Matrix.Scale(new xyz(scalex, scaley, 1)));

transform:

var a = 1;
var b = 1;
var c = 0;
var d = 1;
var e = 0;
var f = 0;
WebDevice.MulMatrix(Matrix.fromElements2D(a, b, c, d, e, f));

setTransform:

Ist fast das selbe wie transform. Statt WebDevice.MulMatrix(Matrix.fromElements2D(a, b, c, d, e, f)); muss WebDevice.ModelMatrix=WebDevice.MulMatrix(Matrix.fromElements2D(a, b, c, d, e, f)); gesetzt werden.