Question

我是画布的新手，我已经谷歌搜索了几个小时，但我被卡住了。

我想要做的是在画布元素上渲染视频，将其分割并为片段制作动画。我在那里一半（见http://jsbin.com/riduxadazi/edit?html,css,js,console,output）但我有几个问题：

我做得对，还是效率极低？
我想全屏使用视频。无论我尝试什么，画布网格+视频似乎都不匹配大小。
我想为视频片断制作动画，但我不知道应该如何解决这些问题。我可以获得某种阵列并逐个制作动画吗？

我的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更有效。您可以限制它，这样您只需通过使用交替显示的简单布尔标志来更新每1/30帧以匹配视频速率。
视频元素不需要插入DOM。此外，实际的视频位图大小是通过属性videoWidth和videoHeight读取的，但是，在提供的代码中，您应该使用画布'属性width和height来确定目的地大小。要绘制比例，您可以使用 this answer 。
如果要拆分内容，使用剪裁参数drawImage()将是将效果绘制到画布上的更有效方法。
您可以使用数学方法分割视频（请参阅 this answer ）或使用允许您定义源区域并在其上具有单独属性的对象，例如位置，旋转，缩放等等。如果你必须考虑目标位置采用当前的画布大小。

将HTML5画布（视频）元素分割成碎片

1 个答案: