Javascript 画布背景未清除

这似乎是一个非常简单的问题，我必须忽略一些东西，但使用以下代码：

window.onresize = function(){
  init.canvas.width = window.innerWidth;
  init.canvas.height = window.innerHeight;
}
var init = {
  canvas: new Object(),
  ctx: new Object(),
  constructCanvas: function(){
    this.canvas = document.getElementById("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
  }
}
init.constructCanvas();

var a = 20;
var b = 20;
init.ctx.lineWidth = 4;
function loop(){
  init.ctx.fillStyle = "Blue";
  init.ctx.fillRect(0,0,init.canvas.width,init.canvas.height);
  init.ctx.moveTo(a,b);
  init.ctx.lineTo(a+=9,b);
  init.ctx.stroke();
}
setInterval(loop,100);

---

应该发生的是，我得到了长度为9的小线段，然后当下一次调用发生时，一条线段应该清除，另一条线段应该放在前一条线段的末尾，但是相反，我只得到了一条长线，而fillRect调用似乎什么都没做

如果不使用beginPath，会出现许多画布问题，这是其中之一：

画布确实被正确地清除了。但是，您永远不会清除路径，因此您总是重新绘制整条线，而不仅仅是您想要的部分。通过调用moveTo和lineTo，您只是将下一个部分添加到已创建的路径中，然后在笔划上绘制该路径。您需要开始一个新的路径：

function loop(){
  init.ctx.fillStyle = "Blue";
  init.ctx.fillRect(0,0,init.canvas.width,init.canvas.height);

  init.ctx.beginPath():
  init.ctx.moveTo(a,b);
  init.ctx.lineTo(a+=9,b);
  init.ctx.stroke();
}

---

好的，如果不调用beginPath，moveTo调用是否被有效忽略？不，不是，但它之前没有有效地更改任何内容。想象一下画布上的画笔线条。moveTo将笔刷移动到最后一行结束的位置。然而，刷子已经在那里了，因为你还没有开始一条新的道路。moveto不会创建新路径，它只会提起笔刷并将其移动到新位置，而不会在两者之间画一条线。当您使用“beginPath”时，有关最后一个笔刷位置的信息将丢失，这次您必须移动它。答案将解决您的问题，但您做了一些错误的事情。使用requestAnimationFrame调用循环函数。在init中为canvas和ctx属性创建对象是多余的，您无论如何都要覆盖它们。在constructCanvas函数中创建这两行时删除它们。另外，新对象与{}相同。在window.setInterval中不使用window，那么为什么要在innerWidth、innerHeight和onresize中使用window呢。窗口始终是默认范围，除非强制使用全局变量，否则不应该使用它。