如何使HTML画布适应屏幕，同时保持宽高比而不切断画布？

canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

window.addEventListener('resize', resizeCanvas);

function resizeCanvas() {
  const canvas = document.querySelector('canvas');
  const aspectRatio = canvas.width / canvas.height;
  const maxWidth = window.innerWidth;
  const maxHeight = window.innerHeight;

  let width, height;
  if (maxWidth / maxHeight > aspectRatio) {
    width = maxHeight * aspectRatio;
    height = maxHeight;
  } else {
    width = maxWidth;
    height = maxWidth / aspectRatio;
  }

  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
}