如何实现Canvas铺满浏览器窗口？已尝试相关配置但遇问题

我帮你分析下问题出在哪，以及怎么解决：你现在的代码里，用chart.style("width")获取到的是带单位的CSS字符串（比如"100vw"），但Canvas的width和height属性需要的是纯数值的像素值，不是带单位的样式，这就导致Canvas无法正确渲染成div的实际大小，大概率会出现尺寸错位或者内容模糊的情况。

下面是修正后的完整实现：

1. 保留你的基础CSS样式（加个小优化） #

div.chart {
  position: relative;
  height: 100vh;
  width: 100vw;
  /* 去掉默认边距，避免出现滚动条 */
  margin: 0;
  padding: 0;
  overflow: hidden;
}

2. 用正确的方式获取div的实际像素尺寸 #

不要用style()方法，而是通过元素的getBoundingClientRect()获取实际渲染的宽高（纯像素数值）：

let chart = d3.select("div.chart");
// 获取div的实际像素宽高
const containerRect = chart.node().getBoundingClientRect();
const width = containerRect.width;
const height = containerRect.height;

// 创建Canvas并设置正确的属性
let canvas = chart
  .append('canvas')
  .attr('width', width)
  .attr('height', height)
  /* 关键：设置Canvas的CSS样式占满div，
     避免窗口缩放时Canvas出现拉伸变形 */
  .style('width', '100%')
  .style('height', '100%');

3. 可选：添加窗口 resize 监听（适配窗口变化） #

如果用户调整浏览器窗口，div的尺寸会跟着变，这时候需要同步更新Canvas的像素尺寸，避免内容模糊：

function refreshCanvasSize() {
  const containerRect = chart.node().getBoundingClientRect();
  canvas
    .attr('width', containerRect.width)
    .attr('height', containerRect.height);
}

// 初始化时执行一次
refreshCanvasSize();
// 监听窗口大小变化
window.addEventListener('resize', refreshCanvasSize);

补充说明 #

d3.select().style("width")返回的是元素的CSS计算样式值，带单位（比如"100vw"），而Canvas的width/height属性控制的是画布的位图分辨率，如果传入带单位的字符串，浏览器会解析失败，默认使用Canvas的初始尺寸（300x150），然后通过CSS拉伸到div的大小，这就会导致绘制的内容模糊或者尺寸完全不对。

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