技术问询：Canvas画布上的方块短暂显示后消失问题排查

看起来你的方块只在页面加载时画了一次，之后画布被定时清除就没再重新绘制了，这就是它很快消失的核心原因。咱们来一步步修复这个问题：

核心问题分析 #

你的代码里有clearCanvas函数会定期清除画布，但缺少一个持续的渲染循环来重新绘制所有元素（包括方块）。如果只在初始化阶段画一次方块，一旦画布被清除，就不会再显示了。

具体解决方案 #

1. 统一管理方块数据：用数组存储所有方块的位置、大小等信息，方便后续批量绘制和维护。
2. 抽离绘制逻辑：把绘制方块的代码封装成独立函数，方便在渲染循环里重复调用。
3. 搭建渲染循环：定时执行「清除画布 → 绘制所有元素」的流程，保证画面持续更新。

修改后的完整代码示例 #

const WIDTH = 640; 
const HEIGHT = 480; 
const PLAYER_SIZE = 20; 
const REPAINT_DELAY = 50; 
const EASY_DELAY = 1750; 
const MODERATE_DELAY = 1000; 
const HARD_DELAY = 750; 
const MAX_BLOCKS = 100; 

var canvas; 
var ctx; 
var playerX = 310; 
var playerY = 230; 
var DX = 0; 
var DY = 0;
// 用数组存储所有方块的位置信息
var blocks = [];

window.onload = init; 

function clearCanvas() { 
  ctx.clearRect(0, 0, WIDTH, HEIGHT); 
}

// 绘制所有方块的函数
function drawBlocks() {
  ctx.fillStyle = '#ff4444'; // 给方块设置颜色
  blocks.forEach(block => {
    // 遍历数组，绘制每个方块
    ctx.fillRect(block.x, block.y, 20, 20);
  });
}

// 绘制玩家方块
function drawPlayer() {
  ctx.fillStyle = '#44ff44';
  ctx.fillRect(playerX, playerY, PLAYER_SIZE, PLAYER_SIZE);
}

// 渲染主循环：每次刷新都重新绘制所有内容
function render() {
  clearCanvas(); // 先清空画布
  drawPlayer();  // 绘制玩家
  drawBlocks();  // 绘制所有方块
  // 这里可以添加玩家移动逻辑
  playerX += DX;
  playerY += DY;
}

function init() { 
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  
  // 初始化几个示例方块（你可以根据需求动态生成）
  blocks.push({x: 100, y: 100}, {x: 250, y: 150}, {x: 400, y: 300});
  
  // 启动渲染循环，每隔REPAINT_DELAY毫秒刷新一次画面
  setInterval(render, REPAINT_DELAY);
}

关键改动说明 #

• 新增blocks数组管理方块数据，后续要添加/删除方块直接操作数组即可。
• render函数作为核心循环，每次执行都会先清空画布，再重新画出所有元素，这样就不会出现画一次就消失的情况。
• 把绘制逻辑拆成独立函数，代码更清晰，也方便后续扩展（比如给不同方块设置不同颜色、大小）。

如果你的方块是动态生成的（比如定时出现新方块），只需要往blocks数组里添加新的方块对象，渲染循环会自动帮你画出来~

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