HTML and CSS Reference
In-Depth Information
2.3.1 Formen und Pfade
Das HTML5-
canvas
-Element unterstützt nur eine primitive Form: das Rechteck. Alle
anderen Formen wie beispielsweise Kreise oder zusammengesetzte Formen werden
durch Pfade gezeichnet und dann gefüllt. Die Canvas-API stellt uns drei Methoden
speziell für Rechtecke zur Verfügung:
void clearRect(in float x, in float y, in float w, in float h);
void fillRect(in float x, in float y, in float w, in float h);
void strokeRect(in float x, in float y, in float w, in float h);
Die Parameter dieser drei Methoden haben die gleiche Bedeutung:
x
und
y
geben die
Position relativ zur oberen linken Ecke des Canvas an. Die Parameter
w
und
h
geben
die Breite und Höhe der rechteckigen Fläche an.
Um den Canvas zu löschen - entweder komplett oder teilweise -, bietet sich die
Methode
clearRect()
an. Nehmen wir einen Canvas mit den Maßen 100 x 100 an,
würde der folgende Aufruf somit die Fläche des Canvas komplett löschen.
clearRect(0,0,100,100);
Was zurückbleibt, ist eine transparente Fläche. Wenn also der Hintergrund des Canvas -
beispielsweise durch eine zugewiesene Hintergrundfarbe im
<body>
der HTML-Seite -
eingefärbt ist, wird die Farbe des Hintergrunds durchgereicht.
Um ein nicht gefülltes Rechteck zu zeichnen, also ein Rechteck, das nur durch die äuße-
ren Randlinien erkennbar ist, wird die Methode
strokeRect()
benutzt; um dieses
Rechteck gefüllt auf den Canvas zu zeichnen, die Methode
fillRect()
.
Das nächste Codebeispiel demonstriert diese drei Methoden, das Resultat ist in der
folgenden Abbildung zu sehen:
ctx.fillStyle "rgb(255,0,0)";
ctx.fillRect(10, 10, 260, 30);
ctx.strokeStyle "rgb(0,255,0)";
ctx.strokeRect(10, 50, 260, 30);
ctx.clearRect(20, 20, 100, 10);
Um Formen durch Pfadfunktionen zu zeichnen, gibt
die Canvas-API folgende Methoden vor:
void beginPath();
void closePath();
void fill();
void stroke();
void clip();
Auf die
clip()
-Methode wird als Letztes in diesem Abschnitt eingegangen, zunächst ist
es wichtig, die vier anderen Methoden zu verstehen. Um einen Pfad zu zeichnen, muss
zunächst die Methode
beginPath()
aufgerufen werden. Der Canvas, oder besser der 2-
D-Kontext des Canvas, ist dann bereit, weitere Zeichenfunktionen aufzunehmen. Die
closePath()
-Methode verbindet den Anfangspunkt des Pfads mit dem aktuellen End-
