Information Technology Reference
In-Depth Information
// radiale Gradiente mit Lichtpunkt
radgrad = context.createRadialGradient(
0+(r* 0.15),0-(r* 0.25),r/3.0,
0,0,r
);
radgrad.addColorStop(0.0,'hsl('+i+',100%,75%)');
radgrad.addColorStop(0.9,'hsl('+i+',100%,50%)');
radgrad.addColorStop(1.0,'rgba(0,0,0,0)');
// Kugel zeichnen
context.save();
context.translate(cx,cy);
context.beginPath();
context.moveTo(0+r,0);
context.arc(0,0,r,0,Math.PI*2.0,0);
context.fillStyle = radgrad;
context.fill();
context.restore();
}
};
drawCircles(); // erstes Set an Kugeln zeichnen
// Animation mit Puls-Tempo starten/stoppen
var pulse = 60;
var running = null;
canvas.onclick = function() {
if (running) {
window.clearInterval(running);
running = null;
}
else {
running = window.setInterval(
"drawCircles()",60000/pulse
);
}
};
Listing 5.3: JavaScript-Code für die Animation mit farbigen Kugeln
Nachdem canvas , context und ein paar weitere Variablen vordefiniert sind,
beginnt in der Funktion drawCircles() die eigentliche Arbeit. Ein semi-
transparentes, weißes Rechteck verblasst bestehenden Inhalt aus früheren
drawCircles() -Aufrufen, bevor die for -Schleife für das Zeichnen neuer Kugeln
sorgt. Die Position jeder Kugel sowie deren Radius wird mithilfe von Math.ran-
Search WWH ::




Custom Search