如何创建与网格布局中div尺寸一致的Canvas？

一、解决Canvas无法获取父容器宽高的问题 #

你遇到的width()/height()返回undefined，核心原因及对应解决方案如下：

1. 确保DOM完全加载后执行JS代码 #

如果JS代码在DOM渲染前执行，.header元素还未被浏览器解析，自然无法获取其尺寸。需将start函数放在DOM加载完成的回调中：

// 原生JS写法
document.addEventListener('DOMContentLoaded', () => {
  start();
});

// jQuery写法（需确保已引入jQuery）
$(document).ready(() => {
  start();
});

2. 改用原生JS可靠获取尺寸 #

若未正确引入jQuery，$会处于未定义状态，导致调用$(".header").width()返回undefined。改用原生JS的getBoundingClientRect()或offsetWidth/offsetHeight更稳定：

const start=()=>{
  canvas = document.querySelector(".header canvas");
  ctx = canvas.getContext('2d');
  const header = document.querySelector(".header");
  // 方式1：获取元素实际渲染的宽高
  const rect = header.getBoundingClientRect();
  canvas.width = rect.width;
  canvas.height = rect.height;

  // 方式2：获取元素布局宽高
  // canvas.width = header.offsetWidth;
  // canvas.height = header.offsetHeight;
}

3. 修复父容器高度塌陷问题 #

你的.all-grid设置了height:100%，但该百分比依赖父元素（html、body）的高度，否则.all-grid高度会塌陷为0，导致.header无实际高度。需给根元素设置高度：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距 */
}

.all-grid{
 width:80%;
 height: 100%;
 display:grid;
 grid-template-columns: 50% 5% 15% 30%;
 grid-template-rows: 5% 15% 40% 10% 25% 5%;
}

二、网格布局优化建议 #

1. 用fr单位替代百分比 #

fr是网格布局专用单位，代表剩余空间的分配比例，无需手动计算总和，比百分比更灵活：

.all-grid{
 width:80%;
 height: 100%;
 display:grid;
 grid-template-columns: 10fr 2fr 3fr 6fr; /* 对应原50%、5%、15%、30%的比例 */
 grid-template-rows: 1fr 3fr 8fr 2fr 5fr 1fr; /* 对应原5%、15%、40%、10%、25%、5%的比例 */
}

2. 让Canvas自适应父容器并避免模糊 #

通过CSS让Canvas占满父容器，再用JS设置绘图分辨率（适配高DPI屏幕，避免拉伸模糊）：

.header canvas {
  width: 100%;
  height: 100%;
  display: block; /* 清除Canvas默认的行内元素间隙 */
}

const start=()=>{
  canvas = document.querySelector(".header canvas");
  ctx = canvas.getContext('2d');
  const header = document.querySelector(".header");
  const dpr = window.devicePixelRatio || 1;
  // 根据父容器尺寸和设备像素比设置绘图分辨率
  canvas.width = header.offsetWidth * dpr;
  canvas.height = header.offsetHeight * dpr;
  ctx.scale(dpr, dpr); // 缩放绘图上下文，保证图形清晰
}

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