Question

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

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的小线段然后当下一个调用发生时应该清除而另一个线段应该放在前一个的末尾但是会发生什么反而是我得到一个long line和fillRect调用似乎什么都不做。

Answer 1

如果您不使用beginPath()，这是许多Canvas问题之一：

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

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();
}

画布背景不清除

1 个答案: