Question

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

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

Answer 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>

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

2 个答案: