javascript数组移位功能在canvas中不起作用

Question

我的画布编码有问题。它工作不正常。 shift()仅适用一次。它应该使绘图消失，但它正常工作。我做错了吗？

<canvas id='ctx' width="500px" height="500px" style="border:1px solid red;"></canvas>
<script type="text/javascript">
//object array
car_asd=[
  {x:100,y:100},
  {x:105,y:100},
  {x:110,y:100}
];
// end of object array
var ctx=document.getElementById("ctx").getContext("2d"); 
function a() {
  car_asd.shift();//does not working all time
  for(i=0;i<3;i++){
    cars=car_asd[i];
    ctx.fillRect(cars.x,cars.y,10,10);
  }
}
setInterval(function(){ a() }, 10);
</script>>

Answer 1

shift（）没有任何问题，问题是之前调用a（）的绘图仍在显示。

因此，您需要在函数a（）的开头清除画布：

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