将带有视频的 html 画布分成 3 个部分

Question

我想在一个 4000 像素宽度的 3 个不同部分的网页上显示一个非常宽的视频（12000 像素），如下图所示

我知道这可以用画布来完成，但我真的无法让它工作。

我已经看到了一些例子，但我没有特别发现这种情况。在此先感谢您的帮助。

- 编辑 -

理想的解决方案是在这支笔中使用动画 http://www.codepen.io/sephhh/pen/OVpELO?editors=1010

<canvas id="myCanvas" height=200 width=200 style="border:1px solid #000000;"></canvas>

---

// set up initial variables
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(100,200);
ctx.stroke();

function drawCircle(x){
  ctx.beginPath();
  ctx.arc(x,100,10,0,2*Math.PI);
  ctx.fillStyle="red";
  ctx.fill();
}
var x = 0;
setInterval(function(){ 
  ctx.clearRect(0,0,200,200);
  drawCircle(x%200);
  x++;
}, 25);

具有与从第一部分开始相同的效果，并使用类似于本示例中的画布在矩形中展开的内容继续其他部分：http : //craftymind.com/factory/html5video/CanvasVideo.html

Answer 1

这其实并不难做到。

首先，您必须创建三个画布元素，每个元素的高度等于视频的高度，宽度是视频宽度的三分之一。

在由setInterval等触发的循环内，您可以使用drawImage()方法将源视频的特定部分绘制到每个画布上。

drawImage 方法接受多个参数 - 我们需要其中 9 个。context.drawImage(源、sourceX、sourceY、sourceWidth、sourceHeight、targetX、targetY、targetWidth、targetHeight);

来源：视频

sourceX、sourceY、sourceWidth 和 sourceHeight：这些定义了我们要在画布上绘制的源的矩形区域。因此，对于第一个画布，这将是视频的左侧三分之一。

targetX、targetY：这些确定我们想要绘制图像的坐标 - 始终为 0,0

targetWidth：始终是视频的三分之一 targetHeight：等于视频的高度

这是一个例子：

var canvas;
var theVideo = document.getElementById("video");
var segment = theVideo.width / 3;
for (var a = 0; a < 3; a++) {
  canvas = document.getElementById("canvas" + a)
  canvas.width = segment;
  canvas.height = document.getElementById("video").height;
}

function draw() {
  for (var a = 0; a < 3; a++) {
    document.getElementById("canvas" + a).getContext("2d").drawImage(theVideo, a * segment, 0, segment, theVideo.height, 0, 0, document.getElementById("canvas" + a).width, document.getElementById("canvas" + 0).height);
  }
}
var interval = setInterval(draw, 20);

section {
  float: left;
  width: 100%
}

<video id="video" width="320" height="176" loop preload autoplay muted style="display:none">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>

<section>
  <canvas id="canvas0"></canvas>
</section>
<section>
  <canvas id="canvas1"></canvas>
</section>
<section>
  <canvas id="canvas2"></canvas>
</section>