JavaScript Canvas线条绘制异常：点击按钮出现多余线条求助

问题原因 #

代码里的drawCircle函数每次绘制圆形时，没有调用ctx.beginPath()重置路径，导致路径不断累积。再加上setInterval(drawCircle, 0)的高频调用，当线条移动到圆形下半部分并顺时针转动时，累积的路径就会被渲染成多余线条。

修复后的代码 #

JavaScript部分

var pos = 0; // 全局变量
var inc = 0.1;
function clockwise() {
  pos -= inc;
  drawCircle();
}
function counter() {
  pos += inc;
  drawCircle();
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;

// 移除不必要的高频定时器，按钮点击已触发绘制
// setInterval(drawCircle, 0);

function drawCircle() {
  ctx.beginPath(); // 新增：重置路径，避免路径累积
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
  drawHand(ctx, pos, radius * 0.9, radius * 0.02);
}
function drawHand(ctx, pos, length, width) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0, 0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-pos);
}

HTML部分

<p><b1 id="left" onclick="clockwise()">counter-clockwise</b1></p>                 
<p><b3 id="right" onclick="counter()">clockwise</b3></p>
<canvas id="canvas" width="240" height="240" style="background-color:transparent"></canvas>

关键修改点 #

• 在drawCircle函数开头添加ctx.beginPath()，确保每次绘制圆形都是独立的新路径，不会和之前的路径叠加渲染。
• 移除setInterval(drawCircle, 0)，按钮点击已经会触发绘制逻辑，高频定时器只会造成不必要的重复重绘，徒增性能消耗。

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