使用JS调整画布大小以保持纵横比

// 获取画布元素
var canvas = document.getElementById("myCanvas");

// 获取画布的初始宽度和高度
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

// 计算画布的纵横比
var canvasAspectRatio = canvasWidth / canvasHeight;

// 监听窗口大小变化事件
window.addEventListener("resize", function() {
  // 获取窗口的新宽度和高度
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  // 计算新的纵横比
  var windowAspectRatio = windowWidth / windowHeight;

  if (windowAspectRatio > canvasAspectRatio) {
    // 如果新纵横比大于画布的纵横比，则将画布的宽度设置为窗口的宽度，高度设置为宽度除以纵横比
    canvas.width = windowWidth;
    canvas.height = windowWidth / canvasAspectRatio;
  } else if (windowAspectRatio < canvasAspectRatio) {
    // 如果新纵横比小于画布的纵横比，则将画布的高度设置为窗口的高度，宽度设置为高度乘以纵横比
    canvas.height = windowHeight;
    canvas.width = windowHeight * canvasAspectRatio;
  } else {
    // 如果新纵横比等于画布的纵横比，则保持画布的大小不变
    canvas.width = windowWidth;
    canvas.height = windowHeight;
  }

  // 在这里可以进行其他与画布大小相关的操作，例如重新绘制画布内容
});

// 在窗口加载完成时执行一次调整画布大小的操作
window.addEventListener("load", function() {
  window.dispatchEvent(new Event("resize"));
});