Question

如何制作视频画布以完全适合该区域

See picture

Answer 1

......无法使用原生Html5 Canvas转换。

您正在尝试将显示Canvas内容（==您的视频）转换为非平行四边形 - 这对于原生Canvas转换是不可能的。 Canvas只能重新塑造成平行四边形。

<强>可是...

您可以将画布倾斜为近似所需的显示。

此图像中的黄金平行四边形可以使用原生Canvas转换完成

示例代码和演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var angle=-Math.PI*.06;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/billboard1.jpg";
function start(){
    cw=canvas.width=img.width;
    ch=canvas.height=img.height;
    ctx.drawImage(img,0,0);
    ctx.transform(1,Math.tan(angle),0,1,0,0);
    ctx.strokeStyle='gold';
    ctx.lineWidth=4;
    ctx.strokeRect(333,135,275,150);
}

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

Answer 2

绘图过程

通过删除红色区域来制作一个alpha通道，然后使用它来离线准备背景图像：

将视频绘制到画布，并应用与形状相加的变换以及稍微重叠
在视频顶部绘制背景（或首次绘制后的部分内容）。这将掩盖不完美的视频边缘。

<强>转化

离线流程：

绘制（现在）alpha区域的点，以便获得三角形或四边形的坐标。注意：画布仅支持仿射变换（2D /平行四边形），因此triangle has to be used。对于CSS，您可以使用3D transforms with basis in a quadrilateral shape。
规范化值

行动中：

将画布和规范化值缩放到所需大小
应用转换，绘制视频，在视频顶部绘制叠加背景

由于大多数视频每秒最多30帧，您还可以将绘图循环限制为一半，以便为其他内容留出更多资源（使用requestAnimationFrame()和toggle flag。

替代方法：

根据需要准备包含所有设置的视频。它应该压缩得很好，因为周围区域不会改变（使用长的关键帧间隔），在这种情况下，背景不包含太多细节，因为低景深也有帮助。

Html5画布和视频

2 个答案: