javascript - HTML canvas arc() javascript中的方法仅显示圆的一小部分

Question

//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");
}

我正在尝试使用此代码在屏幕上从上到下移动一个圆圈的动画，但它显示的只是圆周上的一段圆圈，然后显示了圆圈的一小部分。

Answer 1

演示

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

drawCircle(50,50,50,'green');

function drawCircle(x,y,r,col){
  ctx.beginPath();
  ctx.fillStyle=col;
  ctx.arc(x,y,r,0,Math.PI*2,true);
  ctx.fill();
  ctx.closePath();
}

canvas {
 border:2px dotted blue;
}

<canvas id='c' width='400' height='400'></canvas>

ctx.arc(x,y,r,0,Math.PI*2,true);

arc method需要 6 个参数，

1>x坐标圆弧中心，

2> y坐标圆弧中心，

3>半径长度，

4> 起始 Angular (弧度)，

5>以弧度表示的结束 Angular ，

6> 以顺时针或逆时针方向绘制。value boolean 。默认顺时针，如果为true则逆时针绘制。

在您的情况下ctx.arc(x,y,r,Math.PI*2,true)，前4个参数是正确的，真值转换为1。并且需要1弧度作为结束 Angular 。它顺时针从 2 PI 绘制到 1 弧度。所以你只能得到一段弧。