Question

我最近创建了一个“地图”，虽然不是非常复杂（我正在研究它）它具有基本功能，并且通常朝着正确的方向前进。

如果你看它，你可以看到一个小小的红点，在那些小红点上我想鼠标悬停它并基本上看到文字但是我在使用正确的代码时遇到了一些麻烦。

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()以获取字符串，创建一个新的绝对定位{{1}每个点的元素，并设置<div>。现在，您只需在每个div上设置.style.backgroundImage = url('+myDotDataURL+');属性，然后让浏览器为您处理鼠标检测和工具提示显示。缺点：您将看到点周围方形区域的工具提示，而不是点本身。
使用SVG代替HTML Canvas。在SVG中，绘制的“元素”是具有自己的事件和命中检测的实际对象。有了它，您可以绘制自定义点，让浏览器为您执行所有鼠标点击。

检测鼠标悬停并在HTML Canvas上显示点的工具提示文本

1 个答案: