Jquery 悬停以更改画布的颜色
我是画布上的新手,请任何人帮我缩短这个问题 我创建了5个画布圆圈。当我悬停在任何一个圆圈上时,我只需要更改画布颜色,当悬停在圆圈上时,我在画布上添加了一个类,但是否可以只更改颜色。我不想再次创建画布,悬停时只更改颜色Jquery 悬停以更改画布的颜色,jquery,html,canvas,Jquery,Html,Canvas,我是画布上的新手,请任何人帮我缩短这个问题 我创建了5个画布圆圈。当我悬停在任何一个圆圈上时,我只需要更改画布颜色,当悬停在圆圈上时,我在画布上添加了一个类,但是否可以只更改颜色。我不想再次创建画布,悬停时只更改颜色 $(document).ready(function(){ $('.menuballs').hover(function () { $(".menuballs").children('canvas').toggleClass('hover-intro'); if($(t
$(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来填充圆圈。您的:hover将永远不会被触发 在html画布上绘制的圆圈不是DOM元素。相反,它们就像画布上被遗忘的绘画像素 以下是将悬停效果应用于圆的步骤
- 在javascript对象中跟踪圆的定义(x、y、半径等)
- 收听mousemove事件并测试鼠标是否在您的圆圈内
- 当鼠标进入或离开圆时,请重新绘制圆
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<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();
}