canvas .stroke() 动画绘制 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.