悬停以更改画布的颜色

我是新的画布，任何人都可以帮助缩短此问题。悬停以更改画布的颜色

我创建了5个画布圆。当我将鼠标悬停在任何圆上时，我只需要更改画布颜色，当将鼠标悬停在圆上时，我在画布上添加了一个类，但是可以只更改颜色。我不想在悬停时再次创建画布时只更改颜色。

$(document).ready(function(){ 
$('.menuballs').hover(function() { 
    $(".menuballs").children('canvas').toggleClass('hover-intro'); 
    if($(this).is(':hover')) 
    { 
    var c = document.getElementsByClassName("hover-intro");    
    var graphics = c.getContext('2d'); 
    graphics.fillStyle = 'green'; 
    graphics.fill(); 
    } 
    }); 
});

尝试将此项作为悬停介绍类，但其给定HTMLElement，我需要CanvasElement来填充圆。

来源

2013-12-18 user3114036

您的：悬停永远不会被触发。

在HTML画布上绘制的圆圈不是DOM元素。相反，它们就像画布上被遗忘的画像素。

这是一个悬停效果应用到你的圈子

跟踪您圆的定义（X，Y，半径等）的JavaScript物件中的步骤。
监听鼠标移动事件，并测试鼠标是否你的圈子
当鼠标进入或离开你的圈子里面，重新绘制你的圈子

这是如何将这些步骤看起来可能会代码：

演示：的http://jsfiddle.net/m1erickson/rV9cZ/

跟踪你的圈子的定义（x，y，半径等）在一个javascript对象中。

var myCircle={ 
    x:150, 
    y:150, 
    radius:25, 
    rr:25*25, // radius squared 
    hovercolor:"red", 
    blurcolor:"green", 
    isHovering:false 
}

监听鼠标移动事件，并测试鼠标是否你的圈子里面

function handleMouseMove(e){ 
    mouseX=parseInt(e.clientX-offsetX); 
    mouseY=parseInt(e.clientY-offsetY); 
    var dx=mouseX-myCircle.x; 
    var dy=mouseY-myCircle.y; 

    // math to test if mouse is inside circle 
    if(dx*dx+dy*dy<myCircle.rr){ 

     // change to hovercolor if previously outside 
     if(!myCircle.isHovering){ 
      myCircle.isHovering=true; 
      drawCircle(myCircle); 
     } 

    }else{ 

     // change to blurcolor if previously inside 
     if(myCircle.isHovering){ 
      myCircle.isHovering=false; 
      drawCircle(myCircle); 
     } 
    } 

}

当鼠标进入或离开你的圈子，重绘你的圈子

function drawCircle(circle){ 
    ctx.beginPath(); 
    ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2); 
    ctx.closePath(); 
    ctx.fillStyle=circle.isHovering?circle.hovercolor:circle.blurcolor; 
    ctx.fill(); 
}

来源

2013-12-18 16:59:10 markE

悬停以更改画布的颜色

回答

相关问题