Canvas绘图与动画不显示问题求助（Vanilla JS/HTML/CSS）

1. 修正Canvas尺寸设置方式 #

• 禁止仅用CSS设置Canvas宽高，这会拉伸画布导致绘图偏移或不可见。必须直接在<canvas>标签上设置width/height属性，或通过JS动态赋值：

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

  或JS写法：

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

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

• 检查获取2D上下文的代码，注意是小写的'2d'，拼写错误会返回null：

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

  可以通过console.log(ctx)确认是否获取成功，若为null则说明Canvas元素未找到（比如DOM未加载完成时执行代码）。

3. 排查绘图样式与顺序 #

• 检查绘图颜色是否与Canvas背景（或页面背景）一致，比如默认Canvas背景透明，若页面背景为白色，你又用白色填充图形，自然看不见：

  ctx.fillStyle = '#ff0000'; // 明确设置对比强烈的颜色测试
  ctx.fillRect(50, 50, 100, 100);
  

• 确保绘图代码在DOM加载完成后执行，可将JS放在</body>标签前，或用事件包裹：

  document.addEventListener('DOMContentLoaded', () => {
    // 所有Canvas相关代码写在这里
  });
  

4. 检查动画循环逻辑 #

• 若动画不播放，确认requestAnimationFrame的递归调用是否正确：

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 先清屏再重绘
    // 这里写绘图逻辑
    requestAnimationFrame(animate); // 必须递归调用以维持动画
  }
  animate(); // 记得主动启动动画循环
  

5. 排查元素层级与可见性 #

• 在浏览器DevTools的Elements面板查看Canvas元素的计算样式，确认没有被其他元素覆盖，也没有设置display: none、opacity: 0、visibility: hidden等隐藏属性。

6. 验证绘图参数合理性 #

• 检查绘图的坐标、宽高参数是否超出Canvas范围，比如绘制x: -50, y: -50的图形会出现在画布外。用console.log打印这些参数，确认数值符合预期。
• 对比教程代码，排查是否漏写关键步骤（比如初始化画布尺寸、启动动画循环），或变量名、函数调用顺序出错。

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