HTML5キャンバス（動画）要素を細かく分割する

Question

私はキャンバスで新しく、私は数時間グーグルで行ってきましたが、私は立ち往生しています。

私がしたいのは、キャンバス要素にビデオをレンダリングし、分割し、アニメーション化することです。私は途中でそこにいます（参照：http://jsbin.com/riduxadazi/edit?html,css,js,console,output）が、私が質問のカップルしている：私は物事を正しく

1. をやっている、またはこれがめちゃめちゃ非効率的ですか？
2. 私はビデオのフルスクリーンを使用したいと思います。私が試してみると、キャンバスグリッド+ビデオはサイズに合っていないようです。
3. 動画のアニメーションを作成したいと思いますが、どのように対処するべきかわかりません。何らかの並べ替えをして、1つ1つずつアニメーションすることはできますか？

My JSはこのように見えます。私は最も重要な部分にコメントを追加しようとしました。少なくとも、私が最も重要な部分だったと思う何;）

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

あなたはおそらく、検討する：

• ループを更新する​​を使用しました。これにより、モニターの更新レートと完全な同期が可能になるだけでなく、setTimeout/setIntervalよりも効率的です。単純なブール値のフラグを使用することで、1/30フレームごとに更新してビデオレートに合わせるように調整できます。
• ビデオ要素をDOMに挿入する必要はありません。また、実際のビデオビットマップサイズは、videoWidthとvideoHeightというプロパティで読み取られますが、指定されたコードでは、widthとheightのキャンバスプロパティを使用して、転送先のサイズを決定する必要があります。比例を描くには、たとえばthis answerを使用します。
• drawImage()を使用すると、コンテンツを分割したい場合にクリッピングパラメータを使用する方がキャンバスにビデオを描画する方が効率的です。
• 数学的手法（this answer）を使用してビデオを分割したり、ソースリージョンを定義したり、位置、回転、スケールなどの個々のプロパティを持つオブジェクトを使用することができます。あなたがキャンバスの現在のサイズに採用する宛先の位置を考慮する必要がある場合。