Information Technology Reference
In-Depth Information
nen entsprechen, und als Zusatz-Feature soll bei jedem Klick auf den Canvas
die Animation gestoppt beziehungsweise neu gestartet werden.
Knapp 50 Zeilen JavaScript-Code reichen dafür aus, doch bevor wir uns näher
mit der Analyse des Listings beschäftigen, sehen wir uns gleich einen stati-
schen Screenshot des Ergebnisses an.
Abbildung 5.38:
Animation mit farbigen Kugeln
var canvas = document.querySelector("canvas");
var context = canvas.getContext('2d');
var r,cx,cy,radgrad;
var drawCircles = function() {
// Bestehendes verblassen
context.fillStyle = 'rgba(255,255,255,0.5)';
context.fillRect(0, 0,canvas.width,canvas.height);
// neue Kugeln zeichnen
for (var i=0; i<360; i+=15) {
// Zufallsposition und Größe
cx = Math.random()*canvas.width;
cy = Math.random()*canvas.height;
r = Math.random()*canvas.width/10.0;
