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

要使HTML画布适应屏幕并保持宽高比而不切断画布，可以使用CSS和JavaScript来实现。

使用CSS设置画布的样式：

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

上述CSS代码将画布的宽度设置为最大宽度，并根据屏幕大小自动调整高度，以保持宽高比。

使用JavaScript监听窗口大小变化事件，并根据窗口大小调整画布大小：

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';
}

上述JavaScript代码会在窗口大小变化时调用resizeCanvas函数，根据窗口大小计算出适应屏幕的画布宽高，并将其应用到画布的样式中。

这样，无论窗口大小如何变化，画布都会自动适应屏幕，并保持宽高比而不被切断。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）