HTML5 Canvas Arc 在悬停时重绘

Question

我有三个弧，第一个在页面加载时加载，第二个在鼠标悬停时加载，第三个在鼠标悬停时加载。我希望每次都发生鼠标悬停效果，而不是只发生一次（就像现在一样）。

这是小提琴：http://jsfiddle.net/krish7878/7bX7n/

这是 JS 代码：

    var currentEndAngle = 0;
    var currentStartAngle = 0;

    var currentEndAngle2 = 0;
    var currentStartAngle2 = 0;

    var currentEndAngle3 = -0.5;
    var currentStartAngle3 = -0.5;

    var something = setInterval(draw, 5);

    $("#canvas1").hover(
        function(){
            var something2 = setInterval(draw2, 5);
        },
        function(){
            var something3 = setInterval(draw3, 5);
        }
    );
    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 currentColor = "#00b5ff";
        var radius = 100;
        var width = 8;

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

        if(currentEndAngle < 0.1){
          currentEndAngle = currentEndAngle - 0.01;
        }
        if (currentEndAngle < -0.5){
            clearInterval(something);
        }       
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, true);
        context.lineWidth = width;
        // line color
        context.strokeStyle = currentColor;
        context.stroke();


        /************************************************/
    }
    function draw2() { /***************/

        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 currentColor = "#000";
        var radius = 100;
        var width = 7;
        var startAngle = currentStartAngle2 * Math.PI;
        var endAngle = (currentEndAngle2) * Math.PI;


        if(currentEndAngle2 < 0.1){
          currentEndAngle2 = currentEndAngle2 - 0.01;
        }
        if (currentEndAngle2 < -0.55){
            clearInterval(something2);
        }



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





        /*
        context.beginPath();
        context.clearRect ( 0 , 0 , 400 , 400 );
        context.stroke():   


        /************************************************/
    }
    function draw3() { /***************/

        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 currentColor = "#00b5ff";
        var radius = 100;
        var width = 8;

        var startAngle = currentStartAngle3 * Math.PI;
        var endAngle = (currentEndAngle3) * Math.PI;


        if(currentEndAngle3 < 0){
          currentEndAngle3 = currentEndAngle3 + 0.01;
        }
        if (currentEndAngle3 > 0){
            clearInterval(something3);
        }


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



        /************************************************/
    }

代码说明：draw()、draw2()、draw3()三个函数——draw在页面加载时运行，绘制蓝色弧线，draw2()在鼠标悬停时执行，绘制黑色行，draw3 在鼠标移出时运行。

显示我在单独的画布上绘制它们并单独清除它们，或者有什么方法可以完成这项工作？

Answer 1

这是一种方法：

演示：http://jsfiddle.net/m1erickson/wMy4G/

定义弧形对象

var arc={
    cx:canvas.width/2,
    cy:canvas.height/2,
    radius:100,
    startRadians:0,
    endRadians:-Math.PI/2,
    linewidth:8,
    animationPercent:0,
    animationRate:10,
    animationDirection:0,
};

根据动画点绘制弧线的一部分

function drawArc(arc,color){
    var rStart=arc.startRadians;
    var rEnd=arc.endRadians;
    if(!arc.animationDirection==0){
        if(arc.animationDirection>0){
            rEnd=arc.animationPercent/100*(rEnd-rStart);
        }else{
            rEnd=(100-arc.animationPercent)/100*(rEnd-rStart);
        }
    }
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(arc.cx,arc.cy,arc.radius,rStart,rEnd,true);
    ctx.strokeStyle=color;
    ctx.stroke();
}

弧线部分动画

function animate(time){

    if(continueAnimation){RAF=requestAnimationFrame(animate);}

    drawArc(arc,"blue");

    arc.animationPercent+=arc.animationRate;
    if(arc.animationPercent>=100){
        continueAnimation=false;
    }

}

通过绘制或取消绘制弧线来响应悬停事件

$("#canvas").hover(
    function(){
        cancelAnimationFrame(RAF);
        arc.animationPercent=0;
        arc.animationDirection=1;
        continueAnimation=true;
        requestAnimationFrame(animate);
    },
    function(){
        cancelAnimationFrame(RAF);
        arc.animationPercent=0;
        arc.animationDirection=-1;
        continueAnimation=true;
        requestAnimationFrame(animate);
    }
);