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