如何将两个画布视频元素写入一个新画布答案

【问题标题】：How to Write two canvas video elements into one new canvas如何将两个画布视频元素写入一个新画布
【发布时间】：2019-05-30 17:12:37
【问题描述】：

我有 3 个画布元素，其中包含视频，我想将这两个画布元素添加到第三个画布元素中。我的代码在这里。请任何人帮助我解决同样的问题

请看看下面的代码，帮帮我。

第一个画布

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

第二幅画布

var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

var cw = 200;
var ch = 200;
canvas.width = cw;
canvas.height = ch;
canvas2.width = cw;
canvas2.height = ch;

视频绘制到画布

v.addEventListener('play', function(){
    draw(this,context,cw,ch);
},false);

第三幅画布

var can3 = document.getElementById('canvas3');
var ctx3 = can3.getContext('2d');

can3.width = 400;
can3.height = 400;

绘制函数

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

【问题讨论】：

标签： javascript canvas video html5-canvas

【解决方案1】：

实际上，我想要的是记录具有两个动态创建的不同视频元素的画布元素。所以我把我的代码改成了这个代码

function drawVideosToCanvas() {
    if (isStopDrawingFrames) {
        return;
    }
    var videosLength = videos.length;
    if(videosLength > 2){
        videosLength = 2;
    }

    var fullcanvas = false;
    var remaining = [];

    var length = videos.length;
    videos.forEach(function(video,idx) {
        if (!video.stream) {
            video.stream = {};
        }
        if (video.stream.fullcanvas) {
            fullcanvas = video;
        } else {
            if(idx==0 || idx == (length-1)){
                if(video.stream.active)
                    remaining.push(video);
            }
        }
    });

    if (fullcanvas) {
        canvas.width = fullcanvas.stream.width;
        canvas.height = fullcanvas.stream.height;
    } else if (remaining.length) {
        canvas.width = videosLength > 1 ? remaining[0].width * 2 : remaining[0].width;

        var height = 1;
        if (videosLength === 3 || videosLength === 4) {
            height = 2;
        }
        if (videosLength === 5 || videosLength === 6) {
            height = 3;
        }
        if (videosLength === 7 || videosLength === 8) {
            height = 4;
        }
        if (videosLength === 9 || videosLength === 10) {
            height = 5;
        }

        canvas.height = remaining[0].height * height;
    } else {
        canvas.width = self.width || 360;
        canvas.height = self.height || 240;
    }

    remaining.forEach(function(video, idx) {
        drawImage(video, idx);
    });

    setTimeout(drawVideosToCanvas, self.frameInterval);
}

【讨论】：

是的，这似乎是正确的。我们可以使用 RecordRTC 概念，将所有视频元素制作成单个画布，并增加其高度和宽度

【解决方案2】：

我会为动画使用requestAnimationFrame。在第 3 个画布上，您可以绘制视频，也可以绘制前 2 个画布：

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

var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

var can3 = document.getElementById('canvas3');
var ctx3 = can3.getContext('2d');



var cw = 200;
var ch = 200;
canvas.width = cw;
canvas.height = ch;
canvas2.width = cw;
canvas2.height = ch;
can3.width = 400;
can3.height = ch;

v.addEventListener('play', function(){
    draw();
},false);

function draw() {
    if(v.paused || v.ended) return false;
    context.drawImage(v,20,0,cw,ch);
    context2.drawImage(v,20,0,cw,ch);
    ctx3.drawImage(canvas,0,0,cw,ch);
    ctx3.drawImage(canvas2,cw,0,cw,ch);
    requestAnimationFrame(draw);
}

canvas{border:1px solid}

<video id="v" width="180" height="225" controls>
 <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/twitter_cat.mp4"  type="video/mp4">
</video>
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas>

【讨论】：