HTML中Canvas尺寸无法与百分比设置的Video尺寸匹配的咨询

要解决Canvas和百分比尺寸Video的尺寸同步问题，需要从布局定位和Canvas绘图缓冲区同步两个层面处理：

1. 用容器统一控制布局 #

把Video和Canvas放在同一个相对定位的容器里，让两者都以容器为基准设置100%宽高，确保Canvas完全覆盖Video：

<div class="video-wrapper">
  <video src="your-video-source.mp4" controls></video>
  <canvas></canvas>
</div>

.video-wrapper {
  width: 50%;
  height: 50%;
  position: relative;
  /* 可选：如果需要固定视频比例，添加对应aspect-ratio */
  aspect-ratio: 16/9;
}

.video-wrapper video,
.video-wrapper canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 保持视频/Canvas比例，避免拉伸变形 */
  object-fit: contain;
}

2. 同步Canvas的绘图缓冲区尺寸 #

Canvas有两个关键尺寸：CSS控制的显示尺寸和自身width/height属性控制的绘图缓冲区尺寸。仅靠CSS设置会导致绘图内容拉伸，需要用JS同步这两个尺寸：

const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const wrapper = document.querySelector('.video-wrapper');

function updateCanvasSize() {
  const { width, height } = wrapper.getBoundingClientRect();
  // 同步绘图缓冲区尺寸与容器实际像素尺寸
  canvas.width = Math.floor(width);
  canvas.height = Math.floor(height);
}

// 视频元数据加载完成后初始化尺寸
video.addEventListener('loadedmetadata', updateCanvasSize);
// 窗口大小变化时重新同步尺寸
window.addEventListener('resize', updateCanvasSize);

额外说明 #

• 如果不需要保持视频比例，可将object-fit改为fill，让Video和Canvas完全填充容器
• 用getBoundingClientRect()获取容器的实际像素尺寸，避免百分比单位带来的计算误差

内容的提问来源于stack exchange，提问作者Raja Kushal