Information Technology Reference
In-Depth Information
Läuft die Animation, ist
running
beim nächsten Klick mit der eindeutigen In-
tervall-ID belegt, und wir können sie über
window.clearInterval(running)
un-
terbrechen. Setzen wir
running
dann wieder auf
null
, signalisiert der nächste
Klick auf den Canvas:
Keine Animation läuft
. In diesem Fall starten wir wieder,
und das Spiel beginnt von Neuem.
5.14.2 Video abspielen mit »drawImage()«
Wie Sie bereits aus Abschnitt 5.7, Bilder einbetten
,
wissen, kann bei
drawImage()
auch ein
HTMLVideoElement
als Quelle verwendet werden. Wer allerdings hofft,
dass sich derart eingebundene Videos automatisch abspielen lassen, wird
enttäuscht, denn die Logik dafür muss zur Gänze in JavaScript implementiert
werden. Dass das gar nicht so schwer ist, zeigt das letzte Canvas-Animations-
beispiel, eine Erweiterung unserer
Yosemite-Nationalpark-Postkarte
aus Abbil-
dung 5.25. Anstelle des statischen Ausschnitts von El Capitan platzieren wir
nun in der rechten oberen Ecke ein dynamisches Video mit einem 360°-Pano-
ramaschwenk, der vom Taft Point aus gefilmt wurde. Zusätzlich kopieren wir
während des Abspielens 10 verkleinerte Schnappschüsse des laufenden Videos
als Leiste in den unteren Bereich des Canvas. Nach Beendigung des Videos
ergibt sich das Erscheinungsbild aus Abbildung 5.40.
Abbildung 5.40:
Yosemite-Nationalpark-Videopostkarte
