hover以改变canvas的颜色

我是canvas上的新手，任何人都可以帮忙缩短这个问题。

我创建了5个canvas圈。 当我将鼠标hover在任何圆圈上时，我只需更改canvas颜色，当hover在圆圈上时，我在canvas上添加了一个类但是可以仅更改颜色。 我不想再次创建canvas时只更改hover时的颜色。

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

尝试使用hover-intro类，但是给定HTMLElement，我需要CanvasElement来填充圆圈。

Answer 1

你的：hover永远不会被触发。

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

这些是将hover效果应用于您的圈子的步骤

• 在javascript对象中跟踪圆圈的定义（x，y，半径等）。

• 收听mousemove事件并测试鼠标是否在您的圈子内

• 当鼠标进入或离开您的圆圈时，重绘您的圆圈

这些步骤可能在代码中看起来如何：

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

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

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

收听mousemove事件并测试鼠标是否在您的圈子内

 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 

当鼠标进入或离开您的圆圈时，重绘您的圆圈

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