Canvas - HTML5 - page 182

Die Referenz zum Video-Objekt des video -Elements finden wir in evt.target
und speichern sie in der Variablen video . Ein neues Hintergrundbild erzeugen
wir, wie schon so oft, über new Image() , und sobald das Bild vollständig gela-
den ist, geht es weiter ans Zeichnen von Hintergrund und Titel. Die Schritte bis
hierher müssen wir wohl nicht mehr näher erklären, das Zeichnen des ersten
Frames vielleicht schon.
context.setTransform(1,0,0,1,860,20);
context.drawImage(video,0,0,320,240);
context.strokeRect(0,0,320,240);
Zuerst positionieren wir durch setTransform() das Koordinatensystem in der
rechten oberen Ecke und zeichnen dann über drawImage() den ersten Frame
mit Randlinie. Diesen Vorgang werden wir später beim Abspielen ständig
wiederholen, wobei entscheidend ist, dass das HTMLVideoElement video der
drawImage() -Methode immer das Bild des aktuellen Frames bereitstellt.
Das Stoppen, Starten und danach das Kopieren der aktuellen Frames des im
Hintergrund laufenden Originalvideos auf den Canvas sowie das Erzeugen von
verkleinerten Bildausschnitten implementieren wir beim Klicken auf den Can-
vas in der Funktion canvas.onclick() :
var running = null;
canvas.onclick = function() {
if (running) {
video.pause();
window.clearInterval(running);
running = null;
}
else {
var gap = video.duration/10;
video.play();
running = window.setInterval(function () {
if (video.currentTime < video.duration) {
// update video
context.setTransform(1,0,0,1,860,20);
context.drawImage(video,0,0,320,240);
context.strokeRect(0,0,320,240);
// update icons
var x1 = Math.floor(video.currentTime/gap)*107;
var tx = Math.floor(video.currentTime/gap)*5;
context.setTransform(1,0,0,1,10+tx,710);
context.drawImage(video,x1,0,107,80);