为何ctx.fillRect()需在for循环结束后才执行？Canvas绘图疑问

你的代码之所以在循环结束前看不到任何画面，核心问题是同步阻塞的执行逻辑占用了浏览器主线程：

1. 浏览器的JavaScript执行和页面渲染共用同一个主线程，当你用for循环配合同步的sleep函数时，整个循环会一次性跑完，期间主线程被完全占用，根本没有时间处理Canvas的渲染任务。所有绘制操作都得等循环结束后，才会被浏览器批量渲染出来。
2. 你写的sleep函数是通过do-while死循环实现的，属于同步阻塞代码，会直接卡死主线程，浏览器无法在阻塞期间更新页面。
3. 原代码的绘制顺序也有问题：先绘制矩形，等待1秒后再清屏，导致刚画的内容还没被用户看到就被清除了。

修正方案：用异步API实现逐帧渲染 #

我们可以用setTimeout或者浏览器专门的动画API requestAnimationFrame来替代同步循环，让浏览器有时间在每一次绘制后更新画面。

方案1：使用setTimeout #

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

class Car{
 constructor(options){
  this.pos = options.pos;
  this.size = options.size;
  this.color = options.color;
}

draw(){
 ctx.fillStyle = this.color;
 ctx.fillRect(this.pos[0], this.pos[1], this.size[0], this.size[1]);
}

move(){
 this.pos[0] += 10;
 }
}

const audi = new Car({pos: [10,10], size: [300,20], color: "red"});
let loopCount = 0;

function drawAndMove(){
 if(loopCount >= 10) return; // 执行10次后停止循环

 ctx.clearRect(0, 0, canvas.width, canvas.height); // 先清屏，避免残留
 audi.draw(); // 绘制当前位置的矩形
 audi.move(); // 更新位置
 loopCount++;

 setTimeout(drawAndMove, 1000); // 异步延迟1秒，给浏览器渲染时间
}

drawAndMove(); // 启动动画循环

方案2：使用requestAnimationFrame（更适合动画场景） #

requestAnimationFrame是浏览器专门为动画设计的API，会和浏览器的刷新频率同步，动画更流畅：

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

class Car{
 constructor(options){
  this.pos = options.pos;
  this.size = options.size;
  this.color = options.color;
}

draw(){
 ctx.fillStyle = this.color;
 ctx.fillRect(this.pos[0], this.pos[1], this.size[0], this.size[1]);
}

move(){
 this.pos[0] += 10;
 }
}

const audi = new Car({pos: [10,10], size: [300,20], color: "red"});
let loopCount = 0;
let lastUpdateTime = 0;

function animate(timestamp){
 if(loopCount >= 10) return;

 // 控制每1000ms更新一次位置和画面
 if(!lastUpdateTime || timestamp - lastUpdateTime >= 1000){
  lastUpdateTime = timestamp;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  audi.draw();
  audi.move();
  loopCount++;
 }

 requestAnimationFrame(animate);
}

requestAnimationFrame(animate); // 启动动画

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