Javascript 在画布中播放视频的一部分

我只想在画布上播放我的视频的一半，但在对角线上被截断。 目前，我可以使用以下小javascript在画布easyli中播放我的完整视频：

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var drawFrame = function drawFrame() {
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    requestAnimationFrame(drawFrame);
};

requestAnimationFrame(drawFrame);

最后，我希望能够同时播放2个视频（我只需要在每个视频上调用drawImage），但每个视频都将按对角线剪切，以呈现如下内容：

---

然后，我想根据鼠标位置移动分隔符。

您可以使用合成来实现此目的。

合成使用alpha通道以各种方式组合非alpha数据，例如，“source in”将在存在像素的地方绘制源图像/视频，“destination over”将在存在非alpha的地方保留现有像素，并且仅在存在alpha的地方绘制新像素（这些也被称为。混合属于同一范畴，但与合成有不同的用途）

有许多模式，但上述模式将允许我们通过定义一个alpha区域来组合它们以获得我们想要的零件，该区域将作为两种模式的遮罩。我将包括一个概述，以展示操作符如何为每种模式工作，以更好地了解它们的功能（从：

（A=来源，B=目的地）

这种情况下需要的步骤是：

• 在循环中使用合成模式“

  sourceover

  ”进行初始化
• 清除画布以确保我们有一个alpha通道可以使用
• 相对于鼠标位置绘制对角线的一半
• 使用“

  中的源”在顶部绘制视频源2（将其放置在左侧）

• 在顶部使用“

  目的地在

  上方”绘制视频源1

工作示例 这将加载两个不同的视频（从中借用的链接），加载时，如上所述设置循环（只需给视频几秒钟的加载时间）：

var ctx=c.getContext（“2d”），pos=c.width*0.5，count=2；
ctx.fillText（“正在加载视频，请稍候…”，20,20）；
video1.oncanplay=video2.oncanplay=function（）{if（！--count）renderFrame（）}；
函数renderFrame（）{
ctx.globalCompositeOperation=“源代码结束”；
clearRect（0，0，c.width，c.height）；//确保我们有一个alpha通道
ctx.beginPath（）；//绘制对角线的一半
ctx.moveTo（0,0）；
ctx.lineTo（位置-50，0）；
ctx.lineTo（位置+50，c高度）；
ctx.lineTo（0，c.高度）；
ctx.fill（）；
//视频源2
ctx.globalCompositeOperation=“source in”；//源2中的comp
ctx.drawImage（视频2，0，0，c.宽度，c.高度）；
//视频源1
ctx.globalCompositeOperation=“目的地”；//源1中的comp
ctx.drawImage（视频1，0，0，c.宽度，c.高度）；
requestAnimationFrame（渲染帧）
}
c、 onmousemove=函数（e）{
pos=e.clientX-c.getBoundingClientRect（）.左；
}

视频{显示：无}

你想达到什么目的，为什么不在一些视频编辑软件上编辑视频蒙太奇并在你的页面上播放？或者你正在尝试创建在线视频编辑器？：）我忘记了一点，我想能够根据鼠标位置移动对角线。我提出了一个问题：）从来没有听说过这个组合，这有点棘手，即使在读了两遍文档之后，我也不确定这里会发生什么：D但是使用这个解决方案，我只看到一个视频，只要我移动鼠标，就没有更多的视频：（@jbuiss0n oops，忘记设置初始编译模式（source over）对于掩码。当然，每个帧也必须调用renderFrame（）。@jbuiss0n也添加了实际的视频源，以显示它按预期工作（只需给视频一些时间加载…）这太棒了，非常感谢！我仍然不完全理解如何使用合成，但我肯定会研究它。@jbuiss0n没问题。我建议不要过于沉迷于数学，而是看看这个图形概述，它显示了每个操作符对源（=正在绘制的新内容）和目标所做的操作（现有内容）-所有白色输入=透明alpha通道。