如何调整canvas图片的比例以适应视频标记？

可以使用以下代码示例来解决此问题：

<!-- HTML代码 -->
<canvas id="myCanvas"></canvas>
<video src="myVideo.mp4" id="myVideo"></video>

// JavaScript代码
const canvas = document.querySelector("#myCanvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("#myVideo");

function drawImageScaled(img, ctx) {
  const canvasAspect = canvas.width / canvas.height;
  const imgAspect = img.width / img.height;
  let scaleX = 1;
  let scaleY = 1;
  let offsetX = 0;
  let offsetY = 0;

  if (imgAspect > canvasAspect) {
    // 图片宽度比画布宽度大
    scaleX = canvas.width / img.width;
    scaleY = scaleX;
    offsetY = (canvas.height - img.height * scaleY) / 2;
  } else {
    // 图片高度比画布高度大
    scaleY = canvas.height / img.height;
    scaleX = scaleY;
    offsetX = (canvas.width - img.width * scaleX) / 2;
  }

  ctx.drawImage(img, offsetX, offsetY, img.width * scaleX, img.height * scaleY);
}

video.addEventListener("loadedmetadata", function() {
  drawImageScaled(this, ctx);
});

此代码示例使用JavaScript和HTML画布API来处理图像和视频。使用drawImageScaled函数来缩放图片以适应画布尺寸。在视频元素加载元数据后，在画布上绘制调整后的图像。