arc动画的Javascript动画（）长度

我知道这个问题可能已经被回答了，但我很难弄清楚如何用我的代码来做到这一点。arc动画的Javascript动画（）长度

我想要的是圆的圆弧在点击鼠标时从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();

任何帮助将是巨大的，非常感谢你。

来源

2015-12-22 RedShift

这是别人的小提琴动画arc（）的绘图。也许它会让你指出正确的方向。添加一个点击处理程序来启动draw()方法，你应该很好。

HTML

<html> 
    <head> 
     </head> 

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

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/

来源

2015-12-22 17:10:26 Korgrue

不要打扰context.translate，因为你可以在context.arc合作直接设置弧的centerX & centerY mmand。

可以控制多少360度弧角的在动画通过context.arc(centerX,centerY,radius,startAngle,endAngle)设置startAngle & endAngle所示。

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>

来源

2015-12-22 22:17:05 markE

非常感谢您！ – RedShift

arc动画的Javascript动画（）长度

回答

相关问题