arc() 长度的 JavaScript 动画

Question

我知道这个问题可能已经得到解答，但我很难弄清楚如何使用我的代码来做到这一点。

我想要的是每当单击鼠标时，圆弧都会执行从 0 度到 360 度的绘制动画。

我知道我应该将其放入一个增加 Angular 循环中，但我一直遇到(我认为)翻译的问题。

这是到目前为止我的代码: https://jsfiddle.net/s7aufv0g/2/

这是我画球的地方:

// Draw the ball

ctx.clearRect(0,0,width,height);

ctx.save();
ctx.translate(ball.position.x, ball.position.y);
ctx.beginPath();
ctx.arc(0, 0, ball.radius, 0, Math.PI*2, true);

ctx.stroke();

ctx.closePath();

ctx.restore();

任何帮助都会很棒，非常感谢。

Answer 1

不必费心context.translate，因为您可以直接在context.arc命令中设置圆弧的centerX和centerY。

您可以通过设置 context.arc(centerX,centerY) 中的 startAngle 和 endAngle 来控制动画中显示的 360 度弧 Angular 的大小，半径，起始 Angular ，结束 Angular )。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var cx=cw/2;
var cy=ch/2;
var radius=Math.min(cw,ch)*.75/2;
var startAngle=-Math.PI/2;
var accumAngle=0;
var increment=Math.PI*2/120;

ctx.lineWidth=13;
ctx.strokeStyle='skyblue';

requestAnimationFrame(animate);

$("#canvas").mousedown(function(e){handleMouseDown(e);});

function handleMouseDown(e){
  if(accumAngle>=Math.PI*2){
      accumAngle=0;
      requestAnimationFrame(animate);
  }
}

function animate(time){
  accumAngle+=increment;
  ctx.clearRect(0,0,cw,ch);
  ctx.beginPath();
  ctx.arc(cx,cy,radius,startAngle,startAngle+accumAngle);
  ctx.stroke();
  if(accumAngle<=Math.PI*2){ requestAnimationFrame(animate); }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click in red canvas to begin arc animation<br>You must wait for any current circle to finish drawing.</h4>
<canvas id="canvas" width=300 height=300></canvas>