Canvas绘制折线图时，线条总是超出容器边界怎么办？

这个问题我踩过坑，核心原因是CSS的宽高和Canvas元素本身的宽高属性完全是两码事。

你用CSS设置了width: 100%，这只是把Canvas显示区域拉伸了，但Canvas内部的绘图分辨率还是默认的300x150。所以你画图时的坐标系统和实际显示尺寸根本对不上，线条超出边界太正常了。

正确的做法是直接设置Canvas元素的width和height属性，而且要在JS里动态设置，顺便处理一下设备像素比：

const canvas = document.querySelector('canvas');

const container = canvas.parentElement;

const dpr = window.devicePixelRatio || 1;



// 获取容器实际尺寸

const rect = container.getBoundingClientRect();

const width = Math.floor(rect.width);

const height = Math.floor(rect.height);



// 设置canvas实际绘图分辨率

canvas.width = width * dpr;

canvas.height = height * dpr;



// CSS控制显示尺寸

canvas.style.width = width + 'px';

canvas.style.height = height + 'px';



// 缩放上下文，保证高清显示

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

ctx.scale(dpr, dpr);

另外你提到的坐标计算问题，这里要做校验。画图之前先确认一下几个关键参数：

// 边距配置，先做非空校验

const padding = {

  top: 20,

  right: 20,

  bottom: 30,

  left: 50

};



// 计算绘图区域时要clamp，防止负值

const chartWidth = Math.max(0, width - padding.left - padding.right);

const chartHeight = Math.max(0, height - padding.top - padding.bottom);



// 数据点坐标转换时，边界检查不能少

function getX(index, total) {

  if (total <= 1) return padding.left + chartWidth / 2;

  const x = padding.left + (index / (total - 1)) * chartWidth;

  return Math.min(Math.max(x, padding.left), width - padding.right);

}



function getY(value, minVal, maxVal) {

  if (maxVal === minVal) return padding.top + chartHeight / 2;

  const ratio = (value - minVal) / (maxVal - minVal);

  const y = padding.top + chartHeight * (1 - ratio);

  return Math.min(Math.max(y, padding.top), height - padding.bottom);

}

还有几点要注意：

第一，getBoundingClientRect() 返回的值可能是小数，要取整，不然在某些浏览器里会有1像素的偏差。

第二，数据范围计算时要防一手除零错误，尤其是 maxVal === minVal 的情况，我就被这个坑过，线上报错找了半天。

第三，如果图表容器后面会resize，记得监听窗口变化重新初始化Canvas尺寸，不然拉伸一下就全乱套了。

你先改一下Canvas的初始化方式，应该就能解决超出边界的问题。

这问题我之前在做服务端渲染图表导出的时候也踩过，不是CSS的问题，是Canvas的像素比和坐标计算没对齐。

你虽然给canvas设置了100%宽高，但canvas元素本身有默认的width和height属性，比如300x150，这是绘图上下文的实际分辨率。当你用CSS拉伸它时，浏览器会缩放这个画布，导致绘制失真、坐标偏移，看起来就像线条溢出。

解决办法分两步：

第一，让canvas的绘制宽高和显示宽高一致。假设你的容器实际尺寸是800x400，那你得设置：

canvas.width = 800;

canvas.height = 400;

或者动态获取：

const rect = canvas.getBoundingClientRect();

canvas.width = rect.width;

canvas.height = rect.height;

第二，考虑设备像素比，不然高清屏会模糊：

const dpr = window.devicePixelRatio || 1;

canvas.width = rect.width * dpr;

canvas.height = rect.height * dpr;

ctx.scale(dpr, dpr);

这时候你再用原来的坐标逻辑绘图，就不会超出边界了。记得重算坐标时别忘了dpr的影响，尤其是留边距的地方。

还有个小建议：画折线前先清空画布ctx.clearRect(0, 0, canvas.width, canvas.height)，避免旧图形叠加造成视觉误差。

这个问题表面看是前端布局，其实跟我们服务端生成图片时遇到的渲染偏差是一类问题，根本都是像素对不上。