HTML5 Canvas 原生JS绘制动态适配屏幕的递增矩形条显示异常问题求解

根本问题定位 #

• Canvas绘图缓冲区与显示尺寸不匹配
  这是出现“绘制不全、不同浏览器表现差异大”的最核心原因。Canvas存在两套独立的尺寸逻辑：
  • 通过CSS设置的是画布在页面上的显示尺寸，你用getBoundingClientRect()获取的就是这个值
  • Canvas元素本身内置的width/height属性对应的是实际绘图缓冲区的尺寸，默认值仅为300px宽、150px高，所有绘制操作都只会在这个缓冲区范围内生效
    你之前只读取了CSS显示尺寸做计算，却没有把这个值同步给Canvas的内置宽高属性，导致绘图区域远小于计算预期，画到缓冲区边界就直接被截断，不同浏览器对默认缓冲区的渲染兼容逻辑差异就会出现跨浏览器显示数量不一致的现象。
• 循环变量未声明
  循环中使用的变量i没有通过let/const关键字声明，会自动成为全局变量，在多段代码共存的场景下容易引发不可预期的冲突。
• 矩形高度未绑定画布实际尺寸
  你代码中固定的矩形高度5*(i+1)最高仅为50px，完全没有利用画布的实际高度空间，和“画布铺满”的初始预期不匹配。

具体修正步骤 #

1. 拿到CSS显示尺寸后，立即将值同步给Canvas的内置属性，这是最关键的一步：

   // 拿到CSS计算得到的画布宽高后补充
   canvas.width = cWidth;
   canvas.height = cHeight;
   

   注意：修改Canvas的width/height属性会自动清空绘图缓冲区，因此这一步必须在所有绘制操作之前完成。
2. 为循环变量加声明，避免全局污染：

   for (let i = 0; i < n; i++) {
     // 循环逻辑
   }
   

3. 将矩形高度和画布实际高度绑定，实现高度逐次递增的铺满效果，比如按比例计算每个条的高度：

   // 让最高的矩形刚好占满画布高度，逐次线性递增
   const barHeight = (i + 1) * cHeight / n;
   

• 适配屏幕尺寸时，不需要引入任何第三方库，直接给window绑定resize事件监听即可：当窗口尺寸变化时，重新获取画布尺寸、清空缓冲区、重绘所有矩形，就能全屏幕自适应。
• 将核心绘制逻辑抽成独立的可复用函数，后续要支持用户输入矩形数量n时，只需要修改n的值再调用一次重绘函数即可，不需要重复编写绘制代码。
• 绘制时可以给每个矩形预留1px的细间隔，或者给矩形设置随机填充色，避免亚像素渲染出现的相邻矩形漏白问题，视觉效果更稳定。

修正后的完整可运行代码参考：

// 通用矩形绘制函数
function drawRect(ctx, x, y, rectWidth, rectHeight) {
  ctx.beginPath();
  ctx.rect(x, y, rectWidth, rectHeight);
  ctx.fill();
}

const canvas = document.querySelector("#my-canvas");
const ctx = canvas.getContext("2d");
let barCount = 10; // 后续可直接修改该值，或监听用户输入更新

function renderAllBars() {
  const displayRect = canvas.getBoundingClientRect();
  // 同步绘图缓冲区与显示尺寸
  canvas.width = displayRect.width;
  canvas.height = displayRect.height;

  const barWidth = displayRect.width / barCount;
  for (let i = 0; i < barCount; i++) {
    const barHeight = (i + 1) * displayRect.height / barCount;
    drawRect(ctx, i * barWidth, 0, barWidth, barHeight);
  }
}

// 初始加载时绘制
renderAllBars();
// 窗口尺寸变化时自动重绘适配
window.addEventListener("resize", renderAllBars);

原有HTML中的CSS样式不需要调整，即可实现全环境下一致的绘制效果。

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