jquery – 悬停以改变画布的颜色

我是画布上的新手,任何人都可以帮忙缩短这个问题.

我创建了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();
   }
  });
});

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

解决方法

你的：悬停永远不会被触发.

在html画布上绘制的圆圈不是DOM元素.相反,它们就像画布上被遗忘的画像一样.

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

>在javascript对象中跟踪圆圈的定义(x,y,半径等).
>听取鼠标移动事件并测试鼠标是否在您的圈内
>当鼠标进入或离开您的圆圈时,重绘您的圆圈

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

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

在javascript对象中跟踪圆圈的定义(x,半径等).

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,Math.PI*2);
    ctx.closePath();
    ctx.fillStyle=circle.isHovering?circle.hovercolor:circle.blurcolor;
    ctx.fill();
}

jquery – 悬停以改变画布的颜色

解决方法

猜你在找的jQuery相关文章