canvas .stroke（）animate draw html5

Question

http://jsfiddle.net/jfrazelle/bZec4/3/我該如何使這個動畫的箭頭繪圖，我如何減慢.stroke（）。我希望這個箭頭在繪製時被繪製和生成動畫。

drawArrow('arrow-1', 50, 50, 100, 10, 100); 

function drawArrow(id, sx, sy, ex, ey, fx){ 
    var arrow = document.getElementById(id); 
    var ctx_1 = arrow.getContext('2d'); 
    ctx_1.clearRect(0, 0, arrow.width, arrow.height); 
    ctx_1.beginPath(); 
    ctx_1.moveTo(10,ey); 
    ctx_1.quadraticCurveTo(sx, sy, ex, ey); 
    ctx_1.stroke(); 

    var ang = findAngle(sx, sy, fx, ey); 
    drawArrowhead(ctx_1, fx, ey, ang, 15, 15); 
} 

function drawArrowhead(ctx, locx, locy, angle, sizex, sizey) { 
    var hx = sizex/2; 
    var hy = sizey/2; 
    ctx.translate((locx), (locy)); 
    ctx.rotate(angle); 
    ctx.translate(-hx,-hy); 
    ctx.beginPath(); 
    ctx.moveTo(0,0);  
    ctx.lineTo(0.5*sizex,1.0*hy); 
    ctx.lineTo(0.5,1.0*sizey); 
    ctx.stroke(); 
} 

// returns radians 
function findAngle(sx, sy, ex, ey) { 
    // make sx and sy at the zero point 
    return Math.atan2((ey - sy) , (ex - sx)); 
} 

Answer 1

您可能想要使用requestAnimFrame。外觀here.