HTML5画布-视频的镜像部分

Question

我在网站（https://antoni.de）上找到了一个很棒的滑块

[滑块将视频设置为背景，过渡效果使视频破碎成碎片（条形，宽度不同，取决于滚动位置）] >>

如何获得相对接近的版本？

这是我当前的代码：

HTML + jQuery：

<div id="slider">
   <canvas id="c" width='1920px' height='1080px'></canvas>
   <video id="v" preload="auto" autoplay="" loop="" muted="">
      <source src="common/vid/stage_loop.mp4">
   </video>
 </div>
<script>
        // Copy video to canvas
        document.addEventListener('DOMContentLoaded', function(){
            var v = document.getElementById('v');
            var canvas = document.getElementById('c');
            var context = canvas.getContext('2d');


            v.addEventListener('play', function(){
                draw(this,context,canvas.width,canvas.height);
            },false);

        },false);

        function draw(v,c,w,h) {
            if(v.paused || v.ended) return false;
            c.drawImage(v,0,0,w,h);
            setTimeout(draw,20,v,c,w,h);
        }


</script>
Css：

#slider {
    display: block;
    width: 100%;
    height: 100vh;
    background-color: black;
    overflow: hidden;
    position: relative;
}
#slider canvas {
    position: absolute;

    top: 50%;
  left: 50%;
  z-index: 1;
  min-width: 1920px;
  min-height: 1080px;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#slider video {

    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
}
我该怎么办？：/

我在网上没有发现任何相关内容，我是使用html画布的初学者

我在网站（https://antoni.de上找到了一个非常棒的滑块），该滑块将视频设置为背景，过渡效果使视频破碎成碎片（条形，宽度不同，...） >

Answer 1

您需要将视频绘制到一个画布上，然后将该画布上的片段（以您选择的任何顺序绘制）到第二个画布上，这将显示出来。

这是完成所有视频处理的方式，例如，使用视频并将其映射到画布的这个（有点著名和古老的）“爆炸”示例：http://www.craftymind.com/blowing-up-html5-video-and-mapping-it-into-3d-space/

Answer 2

看看drawImage() documentation on MDN。您可以通过调整source中的destination和drawImage()参数来缩放和定位每个帧的视频。例如，要在画布的最右边绘制20像素的垂直视频条纹，可以执行以下操作：