使用Media Queries实现Canvas元素响应式适配的最佳方案是什么

核心原理 #

canvas存在两套独立的宽高体系：

• 元素渲染宽高：由CSS规则控制，决定canvas在页面布局中占据的空间大小
• 画布坐标系宽高：由<canvas>标签的width/height属性控制，决定内部绘图的像素精度，两者不同步会出现内容拉伸、模糊、交互点位错位的问题

实现步骤 #

1. CSS布局适配 #

先通过CSS让canvas元素跟随容器或视口自适应，不需要写死固定尺寸：

canvas {
  display: block; /* 清除默认行内块元素的底部空白间隙 */
  width: 100%; /* 宽度占满父容器，也可根据需求设置为100vw占满视口 */
  height: auto; /* 高度自动适配宽度，固定比例场景可替换为aspect-ratio: 16/9 等自定义比例 */
}

如果需要针对特定屏幕尺寸调整布局规则，可正常搭配media queries使用，不影响后续逻辑。

2. JS同步画布属性 #

通过JS动态获取canvas当前的实际渲染尺寸，同步更新画布属性的宽高，同时处理高清屏适配避免模糊：

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

function adjustCanvasSize() {
  // 适配设备像素比，解决2K/4K等高DPI屏幕下绘图模糊问题
  const devicePixelRatio = window.devicePixelRatio || 1;
  // 获取canvas元素当前在页面上的实际渲染宽高
  const canvasBounding = canvas.getBoundingClientRect();

  // 同步画布属性宽高，匹配渲染尺寸乘以像素比保证精度
  canvas.width = canvasBounding.width * devicePixelRatio;
  canvas.height = canvasBounding.height * devicePixelRatio;

  // 缩放绘图上下文，保证绘制的图形尺寸符合预期
  ctx.scale(devicePixelRatio, devicePixelRatio);

  // 此处添加canvas内容重绘逻辑，画布尺寸变化后原有内容会被清空
  // drawYourCanvasContent();
}

// 页面初始化时执行一次
adjustCanvasSize();

// 窗口尺寸变化时重新调整，添加防抖避免频繁触发重绘
let resizeDebounceTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeDebounceTimer);
  resizeDebounceTimer = setTimeout(adjustCanvasSize, 150);
});

场景适配说明 #

• 固定比例画布：直接在CSS中设置aspect-ratio: [你的比例]即可，不需要额外计算高度
• 全屏画布：将CSS的宽高设置为100vw和100vh，同时给html, body设置margin: 0; overflow: hidden即可
• 低版本浏览器兼容：如果需要兼容IE11，去掉aspect-ratio属性，通过JS计算高度即可，其余逻辑不变

注意：不要直接给<canvas>标签写死固定的width/height属性，也不要只修改CSS宽高不同步属性值，两者匹配才能保证canvas正常工作。

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