Canvas - HTML5 - page 122

Analog zum ersten Beispiel definieren wir beim Balkendiagramm zuerst eine
Referenz auf das canvas -Element und dann den Zeichenkontext. Für die Haupt-
arbeit, das Erstellen der horizontalen Balken, ist die Funktion drawBars() ver-
antwortlich, der wir zugleich die gewünschte Anzahl zu zeichnender Balken
übergeben.
<script>
var canvas = document.querySelector("canvas");
var context = canvas.getContext('2d');
var drawBars = function(bars) {
context.clearRect(0,0,canvas.width,canvas.height);
for (var i=0; i<bars; i++) {
var yOff = i*(canvas.height/bars);
var w = Math.random()*canvas.width;
var h = canvas.height/bars*0.8;
context.fillRect(0,yOff,w,h);
context.strokeRect(0,yOff,w,h);
}
};
drawBars(10);
</script>
Ein Aufruf dieser Funktion durch drawBars(10) löscht somit über clearRect()
allenfalls bestehenden Inhalt und zeichnet danach in der for -Schleife über
fillRect() und strokeRect() die zehn gefüllten Balken mit Randlinie. Die Breite
w der Balken variiert von 0 Pixel bis zur Gesamtbreite des canvas -Elements
und wird mithilfe der JavaScript-Funktion Math.random() zufällig gesetzt. Math
.random() liefert eine Zahl von 0.0 bis 1.0 und ist daher bestens geeignet, um
Zufallswerte für Breite, Höhe, aber auch für die Position in Abhängigkeit von
der Canvas-Dimension zu ermitteln. Die Multiplikation mit dem entsprechen-
den Attribut-Wert genügt.
Die gleichabständige, horizontale Aufteilung der Balken folgt der Canvashöhe.
Die Abstände zwischen den Balken resultieren daraus, dass die errechnete,
maximale Balkenhöhe h mit dem Faktor 0.8 multipliziert wird.
Die Breite und Höhe des Canvas lassen sich, wie schon im ersten Beispiel er-
wähnt, bequem über die Attribute canvas.width und canvas.height ablesen.
Ebenso einfach können wir auch vom Zeichenkontext über dessen Attribut
context.canvas auf das HTMLCanvasElement zugreifen, das wir auch gleich dazu
verwenden, um bei jedem Klick auf den Canvas neue Balken zu generieren.
Drei Zeilen Code im Anschluss an den drawBars(10) -Aufruf reichen dazu aus.