Information Technology Reference
In-Depth Information
dom()
wieder zufällig berechnet, wodurch das Zentrum in jedem Fall innerhalb
der Canvas-Fläche zu liegen kommt und der Radius ein Zehntel der Canvas-
Breite nicht übersteigt.
Den Kugeleffekt erzielen wir durch eine radiale Gradiente, deren Geometrie aus
einem Lichtpunkt im oberen rechten Bereich und dem Gesamtkreis besteht.
Die Wahl des Inkrements der
for
-Schleife spiegelt den Wunsch nach Farben
im HSL-Farbraum für die
colorStops
der Gradiente wider. Bei jedem Durchlauf
erhöht sich der Farbwinkel um 15° und bedingt damit den Farbwechsel von Rot
über Grün und Blau zurück nach Rot.
Über die Helligkeit lassen sich dann jeweils zwei zusammenpassende Farben
ableiten: Die erste repräsentiert den Lichtpunkt, die zweite die dunklere Farbe
am Kugelrand. Der dritte Aufruf von
addColorStop()
bewirkt, dass direkt am
Kugelrand zu transparentem Schwarz ausgeblendet wird. Insgesamt werden
auf diese Weise 24 Kreise erzeugt, deren Farbpaare zum besseren Verständnis
in Abbildung 5.39 dargestellt sind.
Abbildung 5.39:
HSL-Farben für die Animation mit farbigen Kugeln
Daran anschließend wird die Kugel schließlich als Kreis mit dem definierten
Farbverlauf gezeichnet. Das Einbetten in
context.save()
und
context.resto-
re()
stellt sicher, dass sich die temporäre Verschiebung mit
translate()
nicht
auf nachfolgende Kreise überträgt. Damit ist die Funktion
drawCircles()
kom-
plett, und wir können ein erstes Set an Kugeln zeichnen und uns dann dem
Timer widmen.
Knapp fünfzehn Zeilen reichen aus, um das Starten und Stoppen der Animation
über einen
onclick
-EventListener zu implementieren. Beim ersten Klick auf
den Canvas starten wir die Animation mit
window.setInterval()
und speichern
die eindeutige Intervall-ID in der Variablen
running
. Da Zeitangaben bei
window
.setInterval()
in Millisekunden erfolgen, müssen wir natürlich die Schläge
pro Minute in der Variablen
pulse
entsprechend umwandeln.
