将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);

要具有从第1部分开始的相同效果，请继续使用本示例中的示例将画布分散在矩形中的其他内容：http://craftymind.com/factory/html5video/CanvasVideo.html

Answer 1

实际上并不难做到。

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

在由例如 setInterval ，您可以使用 drawImage（）方法将源视频的特定部分绘制到每个画布上。

drawImage方法接受几个参数-我们需要9个参数。 context.drawImage（source，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>