检测鼠标悬停并显示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