Canvas上从对象生成盒子：绘制2个盒子无显示，求技术方案

我之前也踩过Canvas绘图不显示的坑，给你几个实用的排查方向，应该能快速定位问题：

1. 检查Canvas的尺寸设置 #

很多人会犯的错误：只通过CSS设置Canvas的宽高，而忽略了Canvas本身的width和height属性。CSS只是缩放Canvas的显示区域，而Canvas的实际绘图画布尺寸由自身的width/height决定，两者不匹配的话，要么内容被拉伸变形，要么直接超出画布范围看不到。

解决方式：

• 直接在Canvas标签上设置属性：

  <canvas id="myCanvas" width="800" height="600"></canvas>
  

• 或者通过JS动态设置：

  const canvas = document.getElementById('myCanvas');
  canvas.width = 800;
  canvas.height = 600;
  

2. 确认绘图上下文获取成功 #

如果你的JS代码在DOM还没加载完成时就执行，会导致找不到Canvas元素，进而获取不到2D上下文，自然无法绘图。

解决方式：

• 把JS代码放在body标签的末尾，确保DOM加载完成后再执行；
• 或者监听DOMContentLoaded事件：

  document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    // 在这里写绘图代码
  });
  

同时可以加个判断，确认ctx不为null：

if (!ctx) {
  console.error('无法获取Canvas 2D上下文');
  return;
}

3. 检查绘图代码的细节 #

绘制盒子时，这些细节很容易被忽略：

• 填充/描边样式未设置：默认情况下fillStyle和strokeStyle是黑色，但如果Canvas背景也是黑色，就会看不到；或者你用了strokeRect但没设置lineWidth，线条太细也会看不见。
  示例正确代码：

  // 绘制第一个红色填充盒子
  ctx.fillStyle = '#ff4444';
  ctx.fillRect(50, 50, 120, 120);
  
  // 绘制第二个蓝色描边盒子
  ctx.strokeStyle = '#3366ff';
  ctx.lineWidth = 3;
  ctx.strokeRect(200, 200, 120, 120);
  

• 坐标或尺寸参数不合理：比如x/y值超过了Canvas的宽高，或者宽高设为0，这样盒子就会在画布外或者没有大小，自然看不到。

4. 确认Canvas元素本身可见 #

有时候Canvas可能被其他DOM元素覆盖，或者设置了display: none、opacity: 0等样式。可以给Canvas加个临时边框来确认它的位置：

canvas.style.border = '1px solid #cccccc';

5. 查看浏览器控制台报错 #

按F12打开浏览器开发者工具，切换到Console面板，看看有没有红色的错误提示。比如变量未定义、方法调用错误等，都会导致绘图代码中断执行。

按照上面的步骤一步步排查，应该就能找到问题所在啦！

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