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＆gt; x cordinate arc center，

2 - ; y cordinate arc center，

3＆GT;半径长度，

4＆GT;以弧度开始的角度，

5＆gt;以弧度结束的角度，

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

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

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

1 个答案: