如何调整HTML中Canvas元素尺寸：不缩放不失真且覆盖父容器

首先明确Canvas的两个核心尺寸概念，这是解决问题的关键：

• 像素尺寸：通过Canvas元素的width和height属性设置，决定了Canvas画布的实际像素分辨率，是绘图的基础。
• 显示尺寸：通过CSS的width和height样式设置，控制Canvas在页面上的渲染大小。如果两者比例不匹配，就会出现拉伸失真。

具体实现步骤 #

1. 配置父元素与Canvas基础样式
   先确保父元素.board有明确的渲染尺寸，同时让Canvas的显示尺寸占满父元素：

.board {
  width: 100%;
  height: 90vh; /* 示例：占视口高度90%，也可设固定值 */
  box-sizing: border-box; /* 确保padding/border不额外撑开尺寸 */
  border: 1px solid #ddd;
}

#canvas {
  display: block; /* 消除Canvas默认inline-block带来的底部间隙 */
  width: 100%;    /* 显示尺寸占满父元素 */
  height: 100%;
}

2. 用JS同步Canvas像素尺寸与父元素显示尺寸
   直接读取父元素的实际渲染尺寸，设置Canvas的像素属性，同时适配高分辨率屏幕（避免模糊）：

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

function adjustCanvasSize() {
  // 获取父元素当前的实际渲染尺寸
  const rect = board.getBoundingClientRect();
  const displayWidth = rect.width;
  const displayHeight = rect.height;
  // 获取设备像素比，适配高DPI屏幕
  const dpr = window.devicePixelRatio || 1;

  // 设置Canvas的实际像素尺寸 = 显示尺寸 * 设备像素比
  canvas.width = displayWidth * dpr;
  canvas.height = displayHeight * dpr;

  // 调整绘图上下文的缩放比例，保证绘制内容不失真
  ctx.scale(dpr, dpr);

  // 重置画布（可选，根据你的绘图逻辑调整）
  ctx.clearRect(0, 0, displayWidth, displayHeight);
}

// 初始化时调用一次
adjustCanvasSize();

// 监听窗口 resize 事件，实时调整尺寸
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(adjustCanvasSize, 100); // 防抖处理，避免频繁触发
});

关键细节说明 #

• 为什么用getBoundingClientRect()：它能准确获取元素当前的实际渲染尺寸（包含padding和border，若父元素设置box-sizing: border-box），比offsetWidth/clientWidth更适配动态布局场景。
• 设备像素比（DPR）的作用：高分辨率屏幕（如Retina）下，物理像素数是逻辑像素数的2倍或更多，直接用显示尺寸设置Canvas像素会导致绘制内容模糊，乘以DPR后能让Canvas的像素密度匹配屏幕，再通过ctx.scale()让绘图坐标适配逻辑像素，保证清晰。
• 防抖处理：窗口resize事件会频繁触发，加定时器延迟执行尺寸调整，能减少不必要的性能消耗。

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