javascript - 如何将两个 Canvas 视频元素写入一个新 Canvas

Question

我有 3 个 Canvas 元素，其中有视频运行，我想将这两个 Canvas 元素一起添加到第三个 Canvas 元素。 我的代码在这里。请有人帮我解决同样的问题

请看一下下面的代码，并帮助我。

第一张 Canvas

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

第二个 Canvas

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;

视频绘制到 Canvas

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

第三 Canvas

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

Answer 1

实际上，我想要的是记录 Canvas 元素，它有两个动态创建的不同视频元素。所以我将我的代码更改为此代码

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