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動畫（）長度

回答

相關問題