未从 HTML5 Canvas 清除行

Question

我正在尝试解决我的 HTML5 Canvas 动画中出现的奇怪伪影。我试图用彼此跟随的线条包围文本。当我清除第三行时，还有一行仍然存在，好像clearRect() 没有正常工作。
我已经用谷歌搜索了，我的绘图函数确实分别使用了beginPath() 和closePath()，所以当这件事不清楚时，你可以想象我的沮丧。

我希望有人能帮我看看这个动画哪里出了问题。

这是绘制代码的示例（因为如果我链接到 JSFiddle，堆栈溢出会迫使我将代码放在这里）

function drawArc(xPos, yPos,
  radius,
  startAngle, endAngle,
  anticlockwise,
  lineColor, fillColor) {
  var startAngle = startAngle * (Math.PI / 180);
  var endAngle = endAngle * (Math.PI / 180);

  var radius = radius;

  context.strokeStyle = lineColor;
  context.fillStyle = fillColor;
  context.lineWidth = 1;

  context.beginPath();
  context.arc(xPos, yPos,
    radius,
    startAngle, endAngle,
    anticlockwise);
  context.fill();
  context.closePath();
}

function drawLine(xStartPos, yStartPos, xEndPos, yEndPos, width, color) {
  context.stokeStyle = color;
  context.lineWidth = width;

  context.beginPath();
  context.moveTo(xStartPos, yStartPos);
  context.lineTo(xEndPos, yEndPos);
  context.stroke();
  context.closePath();
}

JSFiddle：https://jsfiddle.net/xtkbnxx5/9/

在这个版本中，动画似乎停在了错误的位置。但是，如果您在 javascript 中注释掉第 126 行并再次运行它，您会看到该行就在那里并且永远不会被清除...

任何帮助将不胜感激。

Answer 1

您的 context.clearRect(...) 语句没有清除整个画布。

当我将你的 clearRect 语句更改为

    context.clearRect(0,0, canvas.width, canvas.height);

然后第二行最终消失了。

https://jsfiddle.net/xtkbnxx5/10/