如何将两个含视频的Canvas元素绘制到第三个Canvas？求代码协助

嘿，我来帮你搞定这个问题！你想要把两个正在播放视频的Canvas内容合并到第三个Canvas里，对吧？咱们先梳理下原代码里的小问题，再给出完整的实现方案。

原代码的待优化点 #

• 缺少将两个Canvas内容绘制到第三个Canvas的核心逻辑
• 使用setTimeout做循环绘制，不如requestAnimationFrame适配浏览器刷新节奏，画面会更流畅
• 原代码里只处理了单个视频（变量v），假设你需要两个视频分别渲染到canvas和canvas2，咱们补上这部分逻辑

完整实现代码 #

// 获取第一个Canvas和上下文
const canvas = document.getElementById('canvas');
const ctx1 = canvas.getContext('2d');
// 获取第二个Canvas和上下文
const canvas2 = document.getElementById('canvas2');
const ctx2 = canvas2.getContext('2d');
// 获取第三个Canvas和上下文（用来合并内容）
const canvas3 = document.getElementById('canvas3');
const ctx3 = canvas3.getContext('2d');

// 设置Canvas尺寸
const singleCanvasSize = 200;
canvas.width = singleCanvasSize;
canvas.height = singleCanvasSize;
canvas2.width = singleCanvasSize;
canvas2.height = singleCanvasSize;
canvas3.width = singleCanvasSize * 2; // 宽度设为两个单个Canvas之和
canvas3.height = singleCanvasSize;    // 高度和单个一致，也可以根据需求调整

// 假设你有两个视频元素，这里先获取它们
const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');

// 给两个视频绑定播放事件，开始渲染到各自的Canvas
video1.addEventListener('play', () => {
  drawVideoToCanvas(video1, ctx1, singleCanvasSize, singleCanvasSize);
}, false);

video2.addEventListener('play', () => {
  drawVideoToCanvas(video2, ctx2, singleCanvasSize, singleCanvasSize);
}, false);

// 单个视频渲染到对应Canvas的函数
function drawVideoToCanvas(video, ctx, w, h) {
  if (video.paused || video.ended) return;
  // 清空Canvas避免残留帧
  ctx.clearRect(0, 0, w, h);
  // 绘制视频到Canvas
  ctx.drawImage(video, 0, 0, w, h);
  // 用requestAnimationFrame替代setTimeout，保证和浏览器刷新同步
  requestAnimationFrame(() => drawVideoToCanvas(video, ctx, w, h));
}

// 合并两个Canvas到第三个Canvas的函数
function mergeCanvases() {
  // 清空第三个Canvas
  ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
  // 绘制第一个Canvas到第三个的左侧
  ctx3.drawImage(canvas, 0, 0, singleCanvasSize, singleCanvasSize);
  // 绘制第二个Canvas到第三个的右侧
  ctx3.drawImage(canvas2, singleCanvasSize, 0, singleCanvasSize, singleCanvasSize);
  // 持续执行合并绘制
  requestAnimationFrame(mergeCanvases);
}

// 启动合并绘制（可以在页面加载完成后调用，或者按需触发）
window.addEventListener('load', mergeCanvases);

关键说明 #

• requestAnimationFrame：相比setTimeout，它会自动匹配浏览器的刷新频率（通常60fps），避免画面卡顿或掉帧
• clearRect：每次绘制前清空Canvas，防止上一帧的内容残留，保证画面干净
• 合并逻辑：通过drawImage直接把前两个Canvas作为源绘制到第三个Canvas里，你可以自由调整位置、大小，比如上下排列、缩放等，只需要修改drawImage的参数即可

内容的提问来源于stack exchange，提问作者Pankaj Agrawal