setTimeout()失效导致Canvas中图片无法移动的问题求助

你的代码里有两个关键问题导致图片无法移动：

• drawProjectile函数中，drawImage的绘制坐标写死为6,450，完全没用到你定义的x和y变量，所以图片一直固定在同一位置。
• 每次绘制新位置前没有清除画布，旧图像会残留叠加，就算位置变化也看不出来。

以下是修正后的代码：

var theCanvas = document.getElementById("theCanvas");
var theContext = theCanvas.getContext("2d");
var theImage = document.getElementById("frog");
var x = 300;
var y = 50;

// 确保图片加载完成后再启动动画
window.onload = function() {
  moveProjectile();
};

function drawProjectile() {
  // 清除整个画布，避免旧图像残留
  theContext.clearRect(0, 0, theCanvas.width, theCanvas.height);
  // 使用x、y作为动态绘制坐标
  theContext.drawImage(theImage, x, y, 100, 100);
}

function moveProjectile() {
  x += 1;
  drawProjectile();
  // 用requestAnimationFrame替代setTimeout，动画更流畅且性能更好
  window.requestAnimationFrame(moveProjectile);
}

额外说明：

• 加入window.onload是为了确保图片完全加载后再执行绘制，避免图片未加载导致的绘制异常。
• requestAnimationFrame是浏览器专门为动画设计的API，相比定时器能提供更流畅的动画效果，且会根据浏览器刷新率自动调整帧率。

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