javascript - 行未从 HTML5 Canvas 中清除

Question

我正在尝试解决我的 HTML5 Canvas 动画中出现的一个奇怪的问题。我试图用相互跟随的线条包围文本。当我清除第三行时，还有一行仍然存在，好像 clearRect() 没有正常工作。
我已经用 google 搜索过，我的绘图函数确实分别使用了 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(...) 语句没有清除整个 Canvas 。

当我将 clearRect 语句更改为

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

然后第二行最终消失了。

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