Question

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

我想要的是圆弧在点击鼠标时从0deg到360deg进行绘制动画。

我知道我应该把它放在一个增加角度的循环中，但我一直遇到（我认为）翻译的问题。

到目前为止，这是我的代码： 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而烦恼，因为你可以设置弧的中心X＆amp; centerY直接在context.arc命令中。

您可以通过设置startAngle＆amp;来控制动画中显示360度弧角的大小。 endAngle中的context.arc(centerX,centerY,radius,startAngle,endAngle)。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是别人的小提琴动画画弧（）。也许它会让你指向正确的方向。添加点击处理程序以启动draw()方法，您应该很高兴。

<强> HTML

<html>
    <head>
        </head>

<body>
    <canvas id="canvas1" width="500" height="500"></canvas>
</body>
</html>

<强> JS

var currentEndAngle = 0
var currentStartAngle = 0;
var currentColor = 'black';
var lineRadius = 75;
var lineWidth = 15;

setInterval(draw, 50);


function draw() { /***************/

    var can = document.getElementById('canvas1'); // GET LE CANVAS
    var canvas = document.getElementById("canvas1");
    var context = canvas.getContext("2d");
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius;
    var width;

    var startAngle = currentStartAngle * Math.PI;
    var endAngle = (currentEndAngle) * Math.PI;

    currentStartAngle = currentEndAngle - 0.01;
    currentEndAngle = currentEndAngle + 0.01;

    if (Math.floor(currentStartAngle / 2) % 2) {
      currentColor = "white";
      radius = lineRadius - 1;
      width = lineWidth + 3;
    } else {
      currentColor = "black";
      radius = lineRadius;
      width = lineWidth;
    }

    var counterClockwise = false;

    context.beginPath();
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.lineWidth = width;
    context.lineCap = "round";
    // line color
    context.strokeStyle = currentColor;
    context.stroke();

http://jsfiddle.net/umaar/fnMvf/

arc（）长度的Javascript动画

2 个答案: