我怎样才能包括鼠标在HTML 5图表中的每个酒吧效果

新手到html5。我想通过CSS或JavaScript包含一些鼠标悬停功能，这样当我将鼠标悬停在特定的栏上时，它必须显示一些消息。我不想去一些API。请帮助我。这是我的代码。我怎样才能包括鼠标在HTML 5图表中的每个酒吧效果

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      window.onload=function(){ 
       var canvas=document.getElementById('mycanvas'); 
       var ctx=canvas.getContext('2d'); 
       var value=[180,140,30,340,50,90]; 
       var width=50; 
       var currx=30; 
       ctx.fillStyle="red"; 
       var i = 0; 
       var interval = setInterval(function(){ 
        if (i == value.length){ 
         clearInterval(interval); 
         return; 
        } 
        var h=value[i]; 
        ctx.fillRect(currx,canvas.height-h,width,h); 
        currx+=width+10; 
        i++; 
       }, 2000);console.log(interval); 
      }; 
     </script> 
    </head> 
    <body> 
     <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;"> 
    </body> 
</html>

Demo on jsFiddle

来源

2012-07-19 Praveen Singh

查看[KineticJs]（http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/）。它增加了对画布形状的事件处理的支持。 – 2012-07-19 10:14:46

谢谢@EliranMalka。我已经知道Kineticjs。但我不想去任何其他的JavaScript。 – 2012-07-19 10:16:30

好吧，这似乎是唯一的选择，因为画布形状在DOM中没有表示形式，并且不能作为观察者主体以strait-forward方式提供（也不能由CSS引用，出于同样的原因）。 – 2012-07-19 10:18:05

你有两个选择：

使用像KineticJS一个库，抽象的形状绘制成对象，并为他们提供了绑定鼠标事件漂亮的方法。这有利于最大限度地减少您所需的工作，因此您可以专注于功能本身，而不是重新发明轮子。
滚动您自己的解决方案，就像某人在创建类似上面提到的库时所做的一样。设计一些包含相关特征（特别是x，y，w，h）和你的形状的抽象（在这个例子中是某种Bar对象），通过所有酒吧的bruteforce并计算事件是否发生鼠标位置是否在一个栏内。然后相应地执行，例如用新颜色重新绘制栏。当然，你也必须处理mouseout（把它打回来等）。

来源

2012-07-19 12:17:25 jakee

我怎样才能包括鼠标在HTML 5图表中的每个酒吧效果

回答

相关问题