悬停以改变画布的颜色 [英] Hover to change color of canvas

问题描述

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

我创建了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，半径等）。






• 当鼠标进入或离开您的圈子时，请重画您的圈子

  / li>
  

这些步骤可能会在代码中显示：

演示： a href =http://jsfiddle.net/m1erickson/rV9cZ/> http://jsfiddle.net/m1erickson/rV9cZ/

strong>在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; 
 
 //测试鼠标在圆圈内的数学
 if（dx * dx + dy * dy  
 //改为hovercolor如果以前在外面
 if（！myCircle.isHovering）{
 myCircle.isHovering = true; 
 drawCircle（myCircle）; 
} 
 
} else {
 
 //如果之前在
中，则改为blurcolor if（myCircle.isHovering）{
 myCircle.isHovering = false; 
 drawCircle（myCircle）; 
} 
} 
 
} 
  

当鼠标进入或离开您的圈子时，重画您的圈子

  function drawCircle b 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（）; 
} 
  

I am new in canvas can anyone please help to short this issue.

I create 5 canvas circle. When I hover on any circle I need to change canvas color only, when hover on circle I added one class on canvas but is it possible to change only color. I don't want to create canvas again change only color when 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();
   }
  });
});

Try this as taking hover-intro class but its given HTMLElement, and I need CanvasElement to fill in circle.

解决方案

Your :hover will never be triggered.

Circles drawn on html canvas are not DOM elements. Instead they are like forgotten painted pixels on a canvas.

These are the steps to apply a hover-effect to your circle

• Keep track of your circle's definition (x,y,radius,etc) in a javascript object.

• Listen for mousemove events and test if the mouse is inside your circle

• When the mouse enters or leaves your circle, redraw your circle

This is how those steps might look in code:

Demo: http://jsfiddle.net/m1erickson/rV9cZ/

Keep track of your circle's definition (x,y,radius,etc) in a javascript object.

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

Listen for mousemove events and test if the mouse is inside your circle

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

}

When the mouse enters or leaves your circle, redraw your circle

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

这篇关于悬停以改变画布的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！