懸停以更改畫布的顏色

我是新的畫布，任何人都可以幫助縮短此問題。懸停以更改畫布的顏色

我創建了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

懸停以更改畫布的顏色

回答

相關問題