JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 436

moveTo(400, 450);
quadraticCurveTo(200, 200, 500, 350);
stroke();
// eine Ellipse aus zwei kubischen Bézierkurven - geschlossen
illStyle = "rgba(255, 0, 0, 0.8)";
beginPath();
moveTo(400, 150);
bezierCurveTo(300, 155, 300, 245, 400, 250);
moveTo(400, 150);
bezierCurveTo(500, 155, 500, 245, 400, 250);
ill();
}
};
Das Beispiel zeichnet mehrere graische Objekte:
ein geschlossenes und gefülltes Polygon,
ein geschlossenes und gefülltes Kreissegment,
zwei ofene verbundene Linien,
eine ofene quadratische Bézierkurve,
eine geschlossene und gefüllte Ellipse, die aus zwei kubischen Bézierkurven zusammen-
gesetzt wird.
Bild 14.23■
Verschiedene Pfade zur Erzeugung der
graischen Objekte
Gehen wir die Details an. Wir arbeiten in dem Quellcode mit with() . Sämtliche Methoden
und Eigenschaten im Inneren des Blocks beziehen sich auf den Zeichenbereich. Zuerst
sehen Sie, wie wir das geschlossene und gefüllte Polygon erzeugen. Im Canvas -Bereich
beindet sich das links oben. Auch das geschlossene und gefüllte Kreissegment dürten klar
sein. Es überlagert teilweise das Polygon, aber da wir die Objekte transparent erstellen,
wird das Polygon nicht vollständig verdeckt. Die zwei Linien bleiben ofen. Wir verwenden
hier auch nicht ill() , sondern stroke() .
Interessanter wird es bei unserer ersten Bézierkurve. Die ist quadratisch und ofen. Sie
sehen die Methode zur Erzeugung in der Anweisung quadraticCurveTo(200, 200, 500,
350); . Zum Zeitpunkt der Zeichnung ist der Startpunkt auf die Koordinaten 400, 450 ge -
setzt worden. Die Kurve endet bei den Koordinaten 500, 350. An der Position 200, 200