HTML and CSS Reference
In-Depth Information
Bild 2.5:
Links
quadraticCurveTo
und rechts
bezierCurveTo
.
Bei beiden Methoden ist zu beachten, dass außer den Kontrollpunkten lediglich der
Endpunkt angegeben wird. Der Startpunkt ist der Endpunkt der letzten Zeichenopera-
tion oder der Punkt, der mittels
moveTo()
angegeben wurde. Betrachten wir nun die
quadraticCurveTo()
-Methode:
for (var i 0; i<300; i+ 10)
{
ctx.beginPath();
ctx.moveTo(0, 150);
ctx.quadraticCurveTo(140, i, 280, 150);
ctx.stroke();
}
Die
quadraticCurveTo()
-Methode wird 30 Mal aufgerufen. Durch
moveTo(0, 150)
wird bei jedem Durchgang der Startpunkt gleich
gesetzt, ebenso ist der Endpunkt mit
(280, 150)
jeweils gleich
angegeben. Einzig der Kontrollpunkt verändert sich, die
y
-Position
verändert sich um je 10 Pixel. Das Resultat sieht wie folgt aus:
Die Methode
bezierCurveTo()
ist flexibler, da zwei Kontrollpunkte
angegeben werden müssen. Im Methodenaufruf werden zunächst die
beiden Kontrollpunkte (jeweils
x
und
y
) übergeben, dann der Endpunkt der Bézierkurve.
var i 0;
var draw function() {
ctx.beginPath();
ctx.moveTo(0, 150);
ctx.bezierCurveTo(70, i, 210, 300 i, 280, 150);
ctx.stroke();
i+ 10;
if (i < 300)
setTimeout(draw, 500);
}
setTimeout(draw, 500);
Bild 2.6:
Die fertige Bézierkurve.
