檢測鼠標懸停並在HTML畫布上顯示工具提示文本

我最近創建了一個「地圖」，雖然不是非常複雜（即時處理它），但它具有基本功能並且通常朝着正確的方向前進。檢測鼠標懸停並在HTML畫布上顯示工具提示文本

如果你看看它，你可以看到一個微小的紅點，並在那些微小的紅點上，我想要鼠標懸停，看到文本基本上，但是在獲取代碼時有點麻煩。

http://hummingbird2.x10.mx/website%20creation/mainpage.htm

這是所有的代碼爲止。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Oynx Warrior</title> 
<link rel="stylesheet" type="text/css" href="mystyle.css" /> 

</head> 
<body> 
<h1>Oynx Warrior</h1> 

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript"> 
var c=document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 
cxt.fillStyle="#red"; 
cxt.beginPath(); 
cxt.arc(50,50,1,0,Math.PI*2,true); 
cxt.closePath(); 
cxt.fill(); 

</script> 
</body> 
</html>

來源

2011-01-11 carl asquith

這裏有四個選項：

跟蹤所有的點位置，並跟蹤對身體的mousemove事件。當鼠標移過一個點時，用文本重新繪製畫布。當鼠標移出時，清除畫布並重新繪製而不顯示文字。您必須編寫自己的「命中」檢測代碼，將鼠標位置與所有點的邊界框/半徑進行比較。這很難，但並非不可能。
而不是整個地圖一個畫布，用畫布創建自定義點，在畫布上呼籲toDataURL()得到一個字符串的話，爲每個點一個新的絕對定位<div>元素，並設置.style.backgroundImage = url('+myDotDataURL+');。現在，您可以在每個div上設置title屬性，並讓瀏覽器爲您處理鼠標檢測和工具提示顯示。缺點：你會看到圍繞點的方形區域的工具提示，而不是點本身。
取代HTML Canvas，請使用SVG。在SVG中繪製的「元素」是具有自己的事件和命中檢測的實際對象。藉助此功能，您可以繪製自定義點並讓瀏覽器爲您完成所有鼠標點擊。

來源

2011-01-11 23:16:10 Phrogz

檢測鼠標懸停並在HTML畫布上顯示工具提示文本

回答

相關問題