Javascript Html画布计时动画

我试图使一个圆在画布上移动，但是当我在

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]++;
}

稍后我将添加clear函数来清理屏幕。

函数

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]++;
}