悬停更改画布颜色答案

【问题标题】：Hover to change color of canvas悬停更改画布颜色
【发布时间】：2013-12-18 06:45:46
【问题描述】：

我是画布新手，任何人都可以帮助缩短这个问题。

我创建了 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 来填充圆圈。

【问题讨论】：

标签： jquery html canvas

【解决方案1】：

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

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

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

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

【讨论】：