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（）在发生鼠标移出时运行。

显示我将它们绘制在单独的画布上并单独清除它们，或者有没有一种方法可以完成此任务？

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);
    }
);