我怎樣才能包括鼠標在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圖表中的每個酒吧效果

回答

相關問題