Fatal编程技术网
  • javascript/
  • Javascript HTML5画布在悬停状态下重新绘制

Javascript HTML5画布在悬停状态下重新绘制

javascript html css html5-canvas

Javascript HTML5画布在悬停状态下重新绘制,javascript,html,css,html5-canvas,Javascript,Html,Css,Html5 Canvas,我有三个弧，第一个在页面加载时加载，第二个在鼠标悬停时加载，第三个在鼠标悬停时加载。我希望鼠标移动效果每次都发生，而不是像现在这样只发生一次 这是小提琴： 以下是JS代码： var currentEndAngle = 0; var currentStartAngle = 0; var currentEndAngle2 = 0; var currentStartAngle2 = 0; var currentEndAngle3 = -0.5; va

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

这是小提琴：

以下是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();



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

var currentEndAngle=0；
var currentStartAngle=0；
var currentEndAngle2=0；
var currentStartAngle2=0；
var currentEndAngle3=-0.5；
var currentStartAngle3=-0.5；
var something=设定间隔（图5）；
$（“#canvas1”）。悬停(
函数（）{
var something2=设定间隔（图2，5）；
},
函数（）{
var something3=设定间隔（图3，5）；
}
);
函数draw（）{/***************/
var can=document.getElementById（'canvas1'）；//获取画布
var canvas=document.getElementById（“canvas1”）；
var context=canvas.getContext（“2d”）；
var x=画布宽度/2；
变量y=画布高度/2；
变异半径；
var宽度；
var currentColor=“#00b5ff”；
var半径=100；
var宽度=8；
var startAngle=currentStartAngle*Math.PI；
var endAngle=（currentEndAngle）*Math.PI；
如果（currentEndAngle<0.1）{
currentEndAngle=currentEndAngle-0.01；
}
如果（currentEndAngle<-0.5）{
间隙（某物）；
}       
context.beginPath（）；
弧（x，y，半径，星形，端角，真）；
context.lineWidth=宽度；
//线条颜色
context.strokeStyle=currentColor；
stroke（）；
/************************************************/
}
函数draw2（）{/***************/
var can=document.getElementById（'canvas1'）；//获取画布
var canvas=document.getElementById（“canvas1”）；
var context=canvas.getContext（“2d”）；
var x=画布宽度/2；
变量y=画布高度/2；
变异半径；
var宽度；
var currentColor=“#000”；
var半径=100；
var宽度=7；
var startAngle=currentStartAngle2*Math.PI；
var endAngle=（currentEndAngle2）*Math.PI；
如果（currentEndAngle2<0.1）{
currentEndAngle2=currentEndAngle2-0.01；
}
如果（currentEndAngle2<-0.55）{
净空间隔（某物2）；
}
context.beginPath（）；
弧（x，y，半径，星形，端角，真）；
context.lineWidth=宽度；
//线条颜色
context.strokeStyle=currentColor；
stroke（）；
/*
context.beginPath（）；
context.clearRect（0,040400）；
context.stroke（）：
/************************************************/
}
函数draw3（）{/***************/
var can=document.getElementById（'canvas1'）；//获取画布
var canvas=document.getElementById（“canvas1”）；
var context=canvas.getContext（“2d”）；
var x=画布宽度/2；
变量y=画布高度/2；
变异半径；
var宽度；
var currentColor=“#00b5ff”；
var半径=100；
var宽度=8；
var startAngle=currentStartAngle3*Math.PI；
var endAngle=（currentEndAngle3）*Math.PI；
如果（currentEndAngle3<0）{
currentEndAngle3=currentEndAngle3+0.01；
}
如果（currentEndAngle3>0）{
净空间隔（某物3）；
}
context.beginPath（）；
弧（x，y，半径，星形，端角，假）；
context.lineWidth=宽度；
//线条颜色
context.strokeStyle=currentColor；
stroke（）；
/************************************************/
}
代码说明：有三个函数draw（），draw2（），draw3（）-draw在页面加载时运行，它绘制一条蓝色圆弧，当鼠标悬停并绘制一条黑线时执行draw2（），当鼠标悬停时运行draw3

显示我在单个画布上绘制它们并单独清除它们，或者是否有方法完成此操作？

这里有一种方法：

演示：

定义圆弧对象

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();
}
基于动画点绘制一部分圆弧

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);
    }
);
通过绘制或取消绘制圆弧对悬停事件作出反应

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);
    }
);
markE，谢谢你，这是非常接近的，当悬停发生时，底部弧线消失/flickrs，我们能以某种方式消除它吗？当然，只需向弧线添加一个minRadians属性，然后添加一个if（）语句，确保arc.endRadians永远不会低于arc.minRadians。祝你的项目好运！