Html画布时间动画

Question

我想在画布上做一个圆形移动，但是当我在draw函数中使用setInterval方法时，它不起作用。我该如何去做这件事，每次它移动的时候，我都必须重新绘制对象吗？

这里是我的代码：

var cCoords = [0,0,20,0,2*Math.PI]; 
var sCoords = []; 

function draw(){ 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
    setInterval(function(){circle(ctx)},3000)  
} 
function circle(ctx){ 
    ctx.beginPath(); 
ctx.arc(cCoords[0],cCoords[1],cCoords[2],cCoords[3], cCoords[4]); 
ctx.stroke(); 
ctx.fillStyle="#FFFF33"; 
ctx.fill(); 
ctx.closePath(); 
cCoords[0]++; 
} 

我以后再添加功能明确，清理屏幕。

Answer 1

从不调用函数draw()，并且canvas和ctx不适用于父范围。

var ctx, canvas必须在该函数之外定义。您可以通过将上下文移到父范围也简化一点：

var cCoords = [0,0,20,0,2*Math.PI]; 
var sCoords = []; 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

circle(); // draw circle first time 
setInterval(circle, 3000); 

function circle(){ 
    ctx.beginPath(); 
    ctx.arc(cCoords[0],cCoords[1],cCoords[2],cCoords[3], cCoords[4]); 
    ctx.closePath(); // must come before stroke() 
    ctx.stroke(); 
    ctx.fillStyle="#FFFF33"; 
    ctx.fill(); 
    cCoords[0]++; 
}