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（） - 绘图在页面加载时运行，它绘制一个蓝色弧线，当鼠标悬停发生时执行draw2（）并绘制黑色line，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);
    }
);

悬停时HTML5 Canvas Arc重绘

1 个答案: