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

答

这里有四个选项：

跟踪所有的点位置，并跟踪对身体的mousemove事件。当鼠标移过一个点时，用文本重新绘制画布。当鼠标移出时，清除画布并重新绘制而不显示文字。您必须编写自己的“命中”检测代码，将鼠标位置与所有点的边界框/半径进行比较。这很难，但并非不可能。
而不是整个地图一个画布，用画布创建自定义点，在画布上呼吁toDataURL()得到一个字符串的话，为每个点一个新的绝对定位<div>元素，并设置.style.backgroundImage = url('+myDotDataURL+');。现在，您可以在每个div上设置title属性，并让浏览器为您处理鼠标检测和工具提示显示。缺点：你会看到围绕点的方形区域的工具提示，而不是点本身。
取代HTML Canvas，请使用SVG。在SVG中绘制的“元素”是具有自己的事件和命中检测的实际对象。借助此功能，您可以绘制自定义点并让浏览器为您完成所有鼠标点击。

检测鼠标悬停并在HTML画布上显示工具提示文本

相关推荐