HTML5 Canvas页面始终显示滚动条，寻求解决方法

嘿，这个Canvas滚动条的问题我太熟了！让我一步步帮你解决～

首先，咱们先搞清楚为什么会出现滚动条：你给Canvas硬编码了1280x720的固定尺寸，但浏览器默认的页面样式（比如body自带的margin）或者当浏览器窗口/显示器尺寸小于这个固定值时，Canvas就会超出视口，自然就出现滚动条了。而且不同显示器比例确实会影响这个问题——比如你的显示器是4:3比例，16:9的1280x720画布宽度会超出视口，直接触发横向滚动条。

下面是具体的解决步骤：

1. 先重置页面默认样式 #

浏览器默认给html和body加了margin和padding，这会让Canvas即使尺寸和视口一样，也会因为这些间隙超出视口。先把这些默认样式清掉：

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block; /* 消除Canvas默认inline-block带来的底部空白间隙 */
}

2. 让Canvas自适应视口并保持比例 #

固定尺寸肯定适配不了所有屏幕，咱们得让Canvas根据视口大小自动调整，同时保持你想要的16:9比例（1280x720就是16:9）。这里分两种需求：

需求A：让Canvas填满视口（超出部分裁剪） #

这种适合全屏展示的场景，代码如下：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

function resizeCanvas() {
  const viewportW = window.innerWidth;
  const viewportH = window.innerHeight;
  const targetRatio = 16 / 9; // 你的Canvas原始比例
  const viewportRatio = viewportW / viewportH;

  let canvasW, canvasH;
  if (viewportRatio > targetRatio) {
    // 视口比16:9宽，以高度为基准计算宽度
    canvasH = viewportH;
    canvasW = canvasH * targetRatio;
  } else {
    // 视口比16:9高，以宽度为基准计算高度
    canvasW = viewportW;
    canvasH = canvasW / targetRatio;
  }

  // 设置Canvas的显示尺寸
  canvas.style.width = `${canvasW}px`;
  canvas.style.height = `${canvasH}px`;

  // 适配高分屏，让绘图更清晰（可选但推荐）
  const pixelRatio = window.devicePixelRatio || 1;
  canvas.width = canvasW * pixelRatio;
  canvas.height = canvasH * pixelRatio;
  ctx.scale(pixelRatio, pixelRatio);

  // 重新绘制你的内容
  drawContent();
}

function drawContent() {
  // 这里替换成你的绘图逻辑，比如填充背景
  ctx.fillStyle = '#1a1a1a';
  ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
}

// 初始化+监听窗口 resize 事件
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

需求B：让Canvas在视口内居中，不裁剪内容（留空白） #

如果不想裁剪内容，而是让Canvas在屏幕中间显示，周围留空白，可以在上面的代码基础上，给Canvas加上定位：

canvas {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这样不管视口比例如何，Canvas都会居中显示，不会超出视口，自然就不会有滚动条了。

3. 彻底消除滚动条（可选） #

如果确保Canvas不会超出视口，但还是担心滚动条出现，可以给body加一句：

body {
  overflow: hidden;
}

这样就能强制隐藏滚动条，但要确保你的Canvas不会超出视口，不然内容会被裁剪。

总结一下：显示器比例确实会影响，核心就是放弃固定尺寸，让Canvas自适应视口并保持比例，同时重置默认页面样式。按照上面的方法改，滚动条问题肯定能解决～

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