Information Technology Reference
In-Depth Information
context.canvas.onclick = function() {
drawBars(10);
};
Nachdem nun geklärt ist, wie die zehn Balken gezeichnet werden, stellt sich
die nächste Frage: Wie kommt die hellgraue Farbe der Balken mit schwarzer
Randlinie zustande? Ein Blick auf die Möglichkeiten, in Canvas Farben zu ver-
geben, liefert die Antwort.
5.3
Farben und Schatten
Die Attribute
fillStyle
und
strokeStyle
dienen dazu, Farben für Füllungen und
Linien festzulegen. Farbangaben folgen dabei den Regeln für CSS-Farbwerte
und dürfen aus diesem Grund in einer Reihe verschiedener Formatierungen
angegeben werden. Tabelle 5.1 zeigt die Möglichkeiten am Beispiel der Farbe
Rot.
Methode
Farbwert
#FF0000
Hexadezimal
Hexadezimal (kurz)
#F00
RGB
rgb(255,0,0)
RGB (Prozent)
rgb(100%,0%,0%)
RGBA
rgba(255,0,0,1.0)
rgba(100%,0%,0%,1.0)
RGBA (Prozent)
HSL
hsl(0,100%,50%)
HSLA
hsla(0,100%,50%,1.0)
SVG-Farbnamen
red
Tabelle 5.1:
Gültige CSS-Farbwerte für die Farbe Rot
Um die aktuell gültige Füll- und Strichfarbe in Canvas festzulegen, genügt es,
entsprechende Farbwerte als Zeichenketten für
fillStyle
und
strokeStyle
an-
zugeben. Im Balkendiagramm-Beispiel sind dies die benannte SVG-Farbe
sil-
ver
als Füllung sowie eine halbtransparente schwarze Randlinie in RGBA-No-
tation. Da alle Balken gleich aussehen sollen, definieren wir die dazugehörigen
Stile vor der
drawBars()
-Funktion.
