javascript中的HTML canvas arc（）方法只显示了圆圈的一小部分

我试图用这段代码在屏幕上制作一个从上到下移动的圆的动画，但它只显示圆周上的一段圆，然后显示圆的一小部分。

演示

var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
画圈（50,50,50，'绿色'）；
函数画圈（x、y、r、col）{
ctx.beginPath（）；
ctx.fillStyle=col；
弧（x，y，r，0，数学π*2，真）；
ctx.fill（）；
ctx.closePath（）；
}

画布{
边框：2件点蓝色；
}

演示

var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
画圈（50,50,50，'绿色'）；
函数画圈（x、y、r、col）{
ctx.beginPath（）；
ctx.fillStyle=col；
弧（x，y，r，0，数学π*2，真）；
ctx.fill（）；
ctx.closePath（）；
}

画布{
边框：2件点蓝色；
}

---

您没有调用

drawCircle

我添加了调用drawCircle函数的部分您在

弧中缺少一个参数（cx、cy、r、startAngle、endAngle、逆时针）

这里您将endAngle设置为

true

，它可能会转换为

1

，因此，您将只从2π到1 Ps绘制：

closePath

在这里是无用的您没有调用

drawCircle

我添加了调用drawCircle函数的部分您在

弧中缺少一个参数（cx，cy，r，startAngle，endAngle，逆时针）

这里您将endAngle设置为

true

，它可能会转换为

1

，因此您只能从2π到1ps进行绘制：

closePath

在这里是无用的

//This function draws all the circles 
function drawCircle(x,y,r,col){
  ctx.beginPath();
  ctx.fillStyle=col;
  ctx.arc(x,y,r,Math.PI*2,true);
  ctx.fill();
  ctx.closePath();
}

//this function I'm using to animate the circle
function animate(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  drawBlock();
  blockY+=dy;
  drawBall();
  ballY+=bdy;
  requestAnimationFrame(animate);
}

//this part calls the drawCircle() function
function drawBall(){
  drawCircle(ballX,ballY,ballr,"#ff7744");
}