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

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（）没有什么问题，问题在于以前的调用到（）的图形仍然显示。

所以，你需要在函数（）的开始清除画布：

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