javascript - 将 HTML5 Canvas (视频)元素分割成多个部分

Question

我是 Canvas 新手，我已经在谷歌上搜索了几个小时，但我被困住了。

我想做的是在 Canvas 元素上渲染视频，将其分割并为各个片段设置动画。我已经完成一半了(请参阅:http://jsbin.com/riduxadazi/edit?html,css,js,console,output)，但我有几个问题:

1. 我的做法是否正确，还是效率极低？
2. 我想全屏使用视频。无论我尝试什么， Canvas 网格+视频似乎与大小不匹配。
3. 我想为视频的各个片段制作动画，但我不知道应该如何处理它们。我可以获取某种数组并为各个部分进行动画处理吗？

我的 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

您也许会考虑:

• 使用requestAnimationFrame更新循环。这可以与监视器更新速率完美同步，并且比 setTimeout/setInterval 更高效。您可以对其进行限制，以便通过使用交替的简单 bool 标志，仅每 1/30 帧更新一次以匹配视频速率。
• 视频元素不需要插入到 DOM 中。此外，实际的视频位图大小是通过属性 videoWidth 和 videoHeight 读取的，但在提供的代码中，您应该使用 Canvas 的属性 width和 height 因为这决定了目标大小。要绘制比例，您可以使用 this answer 。
• 如果您想分割内容，则使用 drawImage() 并使用剪辑参数将视频绘制到 Canvas 上是更有效的方法。
• 您可以使用数学方法(请参阅 this answer )或使用允许您定义源区域并具有单独属性(例如位置、旋转、缩放等)的对象来分割视频向前。如果您必须考虑目标位置以适应 Canvas 的当前大小。