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

Question

Ive最近創建了一個“地圖”，盡管它不是很復雜（我正在研究中），但它具有基本功能，並且通常朝着正確的方向前進。

如果您查看它，您會看到一個小紅點，而在這些小紅點上，我想將其懸停在鼠標上，基本上可以看到文本，但是我在正確編寫代碼時遇到了一些麻煩。

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>

Answer 1

這是四個選項：

跟蹤所有點的位置，並跟蹤身體上的mousemove事件。 當鼠標移到一個點上時，用文本重新繪制畫布。 當鼠標移開時，清除畫布並重新繪制而不顯示文本。 您必須編寫自己的“命中”檢測代碼以將鼠標位置與所有點的邊界框/半徑進行比較。 這很難，但並非不可能。
可以使用一個畫布來創建您的自定義點，而不是整個地圖使用一個畫布，在畫布上調用toDataURL()為其獲取字符串，為每個點創建一個新的絕對定位的<div>元素，然后設置.style.backgroundImage = url('+myDotDataURL+'); 。 現在，您只需在每個div上設置title屬性，然后讓瀏覽器為您處理鼠標檢測和工具提示顯示。 缺點：您會看到圍繞點的正方形區域的工具提示，而不僅僅是點本身。
而不是HTML Canvas，而是使用SVG。 在SVG中，繪制的“元素”是具有自己的事件和命中檢測的實際對象。 這樣，您就可以繪制自定義點，並讓瀏覽器為您完成所有鼠標單擊操作。

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

問題描述

1 個解決方案

解決方案1
1 2011-01-11 23:16:10

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

問題描述

1 個解決方案

解決方案1 1 2011-01-11 23:16:10

解決方案1
1 2011-01-11 23:16:10