使用JavaScript在HTML Canvas中实现圆形动画的残留问题求助

你遇到的核心问题是Canvas 2D上下文的路径没有被重置——每次调用ctx.arc()时，这个圆形路径会被追加到当前的路径集合里，而不是替换掉旧路径。所以每次执行ctx.fill()时，会填充所有累积下来的路径，也就出现了“重绘所有旧圆形”的现象。

关键错误点 #

• 没有重置绘制路径：在knob.draw()方法中，每次绘制圆形前没有调用ctx.beginPath()，导致路径不断累积，fill()会填充所有历史路径。
• HTML标签拼写错误：<boyd>应该改为<body>，虽然不影响动画，但会导致HTML结构不规范。
• 可选优化：setPosition中的引用赋值问题——this.oldPosition = this.position是把对象引用赋值过去，修改position时oldPosition也会同步变化，如果后续需要用旧位置局部清除画布，需要改成值复制。

修复后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<body>
  <canvas id="target_temp" width="16" height="100"></canvas>
</body>
</html>

JavaScript部分 #

var canvas; 
var ctx; 
var canvasPos; 

function rgbToHex(r, g, b) { 
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); 
} 

function init() { 
  canvas = document.getElementById("target_temp"); 
  ctx = canvas.getContext("2d"); 
  canvasPos = { x: canvas.offsetLeft, y: canvas.offsetTop }; 
  drawSlider(); 
} 

var y = 7; 
function animate() { 
  y = y + 1; 
  knob.setPosition(8, y); 
  knob.clear(); 
  knob.draw(); 
  if (y < 93) { 
    setTimeout(animate, 10); 
  } 
} 

function drawSlider() { 
  ctx.fillStyle = "#d3d3d3"; 
  ctx.fillRect(0, 0, 16, 100); 
} 

var knob = { 
  position: { x: 8, y: 7 }, 
  oldPosition: { x: 8, y: 7 }, 
  setPosition(_x, _y) { 
    // 修正引用赋值问题，改为值复制
    this.oldPosition = { ...this.position };
    this.position.x = _x; 
    this.position.y = _y 
  }, 
  clear() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    drawSlider(); 
  }, 
  draw() { 
    // 关键：每次绘制前开启新路径
    ctx.beginPath();
    ctx.fillStyle = rgbToHex(0, 0, 112); 
    ctx.arc(8, this.position.y, 7, 0, 2 * Math.PI); 
    ctx.fill(); 
  } 
} 

window.onload = function () { 
  init(); 
  animate(); 
};

额外说明 #

1. beginPath()的作用：它会清空当前的路径集合，让后续的绘图命令（比如arc）创建新的独立路径，这样fill()只会填充当前这一个圆形。
2. 引用赋值修正：用{ ...this.position }扩展运算符复制对象的属性，确保oldPosition保存的是修改前的坐标值，如果你以后想优化性能（比如只清除旧位置的区域而不是全清画布），这个修正就会派上用场。
3. 另外，HTML中的width和height属性不需要加px单位，直接写数值即可。

内容的提问来源于stack exchange，提问作者Yván Ecarri