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

时间:2016-07-26 12:16:52

标签: javascript

我的画布编码有问题。它工作不正常。 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>>

1 个答案:

答案 0 :(得分:1)

shift()没有任何问题,问题是之前调用a()的绘图仍在显示。

因此,您需要在函数a()的开头清除画布:

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