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

beindet sich der Kontrollpunkt. Die Kurve wird quasi in Richtung des Kontrollpunkts gezo-
gen (wie ein Gummiband). In den folgenden Zeilen sehen Sie wie versprochen, dass man
auch Ellipsen mit Bézierkurven erzeugen kann. Der Trick besteht darin, dass der Start-
punkt und der Endpunkt der ersten und der zweiten Bézierkurve jeweils identisch sind. Nur
die beiden Kontrollpunkte liegen jeweils genau gegenüber in der Richtung, in der sich die
Ellipse ausdehnen soll. In unserem Beispiel dehnt sich die Ellipse genau in Richtung der
X-Achse aus. Beachten Sie die Koordinaten der beiden Kontrollpunkte. Sie können gerne
einmal mit deren Positionen spielen. Je näher sich in unserem konkreten Fall die Kontroll-
punkte an den Y-Werten des Start- und Endpunkts jeweils beinden, desto lacher wird die
Ellipse. Und je näher sie in die Mitte rutschen, desto spitzer wird die Ellipse. Aber auch mit
den X-Koordinaten können Sie die Form natürlich beeinlussen. Es ist ein bisschen diizil
und meist mit viel Try-and-Error verbunden.
14.5.1.11■Texte zeichnen
In einem Canvas -Bereich können Sie auch Texte ausgeben. Mit der Eigenschat font geben
Sie die Details zur Schrit (Schritgrad und Schritart) an. Die Methode illText() gibt den
Text, der als erster Parameter angegeben wird, aus. Der zweite und dritte Parameter gibt die
Koordinaten des linken Eckpunkts der Basislinie von dem Text an. Analog verhält es sich
mit strokeText() , wenn Sie nur eine Außenlinie zeichnen wollen. Texte im Umfeld des
Canvas -Konzepts sind besonders darum interessant, weil Texte wie alle anderen graischen
Objekte behandelt werden. Dementsprechend können Sie diese Texte auch beliebig füllen,
etwa mit Farbverläufen oder Mustern. Sie können Texte auch transformieren.
Ein Beispiel zur Ausgabe von Texten
Beispiel (kap14_21.js):
Listing 14.50■ Texte zeichnen
window.onload = function() {
var zb = document.getElementById('cv1').getContext('2d');
var rg1 = zb.createRadialGradient(120, 75, 20, 125, 75, 200);
rg1.addColorStop(0, 'yellow');
rg1.addColorStop(1, 'gray');
with (zb) {
font = "66px Arial";
illStyle = "Red";
illText("Die Antwort", 250, 370);
strokeStyle = "Blue";
font = "160px Courier";
strokeText("ist", 360, 120);
illStyle = rg1;
strokeStyle = "Blue";
font = "360px Times New Roman";
illText("42", 25, 270);
strokeText("42", 25, 270);
}
};
Sie sehen an verschiedenen Stellen die Anwendung der Eigenschat font , wobei wir eine
Schritart und Schritgröße einstellen. An zwei Stellen werden gefüllte Texte ausgegeben
und an zwei anderen Stellen nichtgefüllte Texte, die nur mit einer Außenlinie umrahmt