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

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

弧法需要6个参数，

1>x 电弧中心，

2> y 绳索弧中心，

3>半径长度，

4>弧度起始角，

弧度5>端角，

6>顺时针或逆时针绘制值布尔值。默认顺时针，如果为 true，则它将逆时针绘制。

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