JavaScript中Canvas绘制的小球不显示问题求助

• 检查Canvas实际尺寸
  别只靠CSS设置宽高，必须同时给Canvas元素的width和height属性赋值——CSS是缩放显示，属性才是真实的绘图区域。比如你的小球X坐标是800，要是Canvas的width属性刚好等于800，小球就会刚好在边界外看不到。示例：

  <canvas id="gameCanvas" width="900" height="200"></canvas>
  

• 确认绘图上下文获取正常
  确保你正确拿到了2D绘图上下文，没有这一步所有绘图代码都不会生效，且不会触发报错：

  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  // 可以加个判断：if (!ctx) { console.log('获取上下文失败'); }
  

• 验证绘制代码的执行时机
  必须等DOM加载完成再执行绘图逻辑，要么把JS代码放在body标签末尾，要么用事件包裹：

  document.addEventListener('DOMContentLoaded', () => {
    // 在这里写小球绘制代码
  });
  

  提前执行的话，可能还没获取到Canvas元素，绘图自然无效。

• 简化绘制代码测试
  先写一段最基础的小球绘制代码，确认能显示后再替换成你的坐标：

  ctx.beginPath();
  ctx.arc(100, 100, 20, 0, Math.PI * 2);
  ctx.fillStyle = '#000';
  ctx.fill();
  ctx.closePath();
  

  要是这段代码能显示，再把坐标改成800、170，排查是否超出Canvas可视范围。

• 确认Canvas未被遮挡
  给Canvas加个临时边框，直观确认它的位置和大小：

  #gameCanvas { border: 1px solid red; }
  

  这样能快速判断小球坐标是否落在Canvas的可视区域内。

• 检查动画循环（如果存在）
  要是用了requestAnimationFrame做动画循环，必须确保小球绘制代码在循环内，且每次循环先清屏再重绘所有元素：

  function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 绘制恐龙等其他元素
    // 绘制小球
    ctx.beginPath();
    ctx.arc(800, 170, 20, 0, Math.PI * 2);
    ctx.fill();
    requestAnimationFrame(gameLoop);
  }
  gameLoop();
  

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