Information Technology Reference
In-Depth Information
context.fillStyle = 'silver';
context.strokeStyle = 'rgba(0,0,0,0.5)';
var drawBars = function(bars) {
// Code zum Balkenzeichnen
};
Gültige Werte für die Opazität reichen von 0.0 (transparent) bis 1.0 (opak) und
können als vierte Komponente sowohl im RGB-Farbraum als auch im HSL-
Farbraum verwendet werden. Letzterer definiert Farben nicht über ihre Rot-,
Grün- und Blauanteile, sondern durch eine Kombination aus Farbton, Sätti-
gung und Helligkeit.
HINWEIS
Weitere Informationen zum Thema CSS-Farben mit HSL-Farbpaletten und eine
Liste aller gültigen SVG-Farbnamen finden Sie in der
CSS Color Module Level
3
-Spezifikation unter:
http://www.w3.org/TR/css3-color/
Bei genauerem Hinsehen erkennt man Schatten hinter den Balken, die durch
vier weitere Attribute des Zeichen-Kontextes entstehen:
context.shadowOffsetX = 2.0;
context.shadowOffsetY = 2.0;
context.shadowColor = "rgba(50%,50%,50%,0.75)";
context.shadowBlur = 2.0;
Die ersten beiden Zeilen legen über
shadowOffsetX
und
shadowOffsetY
den
Schattenoffset fest,
shadowColor
bestimmt dessen Farbe und Transparenz, und
shadowBlur
bewirkt schließlich das Weichzeichnen des Schattens, wobei als
Faustregel Folgendes gilt: Je höher der Wert von
shadowBlur
ist, desto stärker
ist der Weichzeichnungseffekt.
Bevor wir uns nun im nächsten Abschnitt mit dem Thema Farbverläufe be-
schäftigen, bleibt noch zu klären, wie der gestrichelte Rahmen im Balkendia-
gramm-Beispiel und allen folgenden Grafiken zustande kommt. Die Antwort ist
einfach: durch CSS. Jedes
canvas
-Element darf natürlich auch mit CSS forma-
tiert werden. Abstände, Position oder
z-index
lassen sich ebenso festlegen wie
Hintergrundfarbe oder Rahmen. Im unserem Beispiel sorgt folgendes Stilattri-
but für den gestrichelten Rahmen:
<canvas style="border: 1px dotted black;">
