HTML5 Leinwand (Video) Element in Stücke schneiden

Question

Ich bin neu mit Leinwand und ich habe für ein paar Stunden googeln, aber ich bin fest.

Was ich tun möchte, ist ein Video auf einem Canvas-Element zu rendern, zu teilen und die Teile zu animieren. Ich bin auf halbem Weg gibt (siehe: http://jsbin.com/riduxadazi/edit?html,css,js,console,output), aber ich habe ein paar Fragen:

1. Bin ich die Dinge richtig tun, oder ist dies extrem ineffizient?
2. Ich möchte das Video Vollbild verwenden. Was auch immer ich versuche, das Leinwandgitter + Video scheint nicht mit der Größe übereinzustimmen.
3. Ich möchte die Teile des Videos animieren, aber ich habe keine Ahnung, wie ich sie ansprechen sollte. Kann ich ein Array bekommen und die Stücke einzeln animieren?

Mein JS sieht so aus. Ich habe versucht, Kommentare zu den wichtigsten Teilen hinzuzufügen. Zumindest was ich denke, waren die wichtigsten Teile;)

var video = document.getElementById('video'); // Get the video 
var ctx = canvas.getContext('2d'), 
    columns = 6, 
    rows = 4, 
    w, h, tileWidth, tileHeight; 

// Start video and add it to canvas 
video.addEventListener('play', function() { 
    var $this = this; //cache 
    (function loop() { 
     if (!$this.paused && !$this.ended) { 

     ctx.drawImage($this, 0, 0,window.innerWidth,window.innerHeight); 

     calcSize(); // Divide video 

     setTimeout(loop, 1000/30); // drawing at 30fps 
     } 
    })(); 
    }, 0); 

function calcSize() { 
    video.width = w = window.innerWidth; 
    video.height = h = window.innerHeight; 

    tileWidth = w/columns; 
    tileHeight = h/rows; 

    ctx.strokeStyle = '#000'; 

    render(); 
} 
function render() { 

    for(var x = 0; x < columns; x++) { 
     ctx.moveTo(x * tileWidth, 0); 
     ctx.lineTo(x * tileWidth, h); 
    } 
    for(var y = 0; y < rows; y++) { 
     ctx.moveTo(0, y * tileHeight); 
     ctx.lineTo(w, y * tileHeight); 
    } 
    ctx.stroke(); 
} 

Answer 1

Sie würden vielleicht darüber nachdenken:

• requestAnimationFrame Mit der Schleife zu aktualisieren. Dies ermöglicht eine perfekte Synchronisation mit der Aktualisierungsrate des Monitors und ist effizienter als setTimeout/setInterval. Sie können es drosseln, so dass Sie nur 1/30 Frame aktualisieren, um die Videorate anzupassen, indem Sie ein einfaches boolesches Flag verwenden.
• Das Videoelement muss nicht in DOM eingefügt werden. Außerdem wird die tatsächliche Bitmap-Größe des Videos über die Eigenschaften videoWidth und videoHeight gelesen. In dem bereitgestellten Code sollten Sie jedoch die Canvas-Eigenschaften width und height verwenden, um die Zielgröße festzulegen. Um proportional zu zeichnen, können Sie zum Beispiel this answer verwenden.
• Die Verwendung der Clipping-Parameter drawImage() wäre der effizienteste Weg, um Video auf Canvas zu zeichnen, wenn Sie den Inhalt teilen möchten.
• Sie können Ihr Video mit einem mathematischen Ansatz teilen (siehe this answer) oder Objekte verwenden, mit denen Sie Quellregionen definieren und individuelle Eigenschaften wie Position, Drehung, Skalierung usw. festlegen können. Für den Fall, dass Sie die Zielposition berücksichtigen müssen, um sie an die aktuelle Leinwandgröße anzupassen.