Fatal编程技术网
  • javascript/
  • Javascript 检测鼠标悬停并在HTML画布上显示点的工具提示文本

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

javascript canvas

Javascript 检测鼠标悬停并在HTML画布上显示点的工具提示文本,javascript,canvas,mouseover,Javascript,Canvas,Mouseover,我最近制作了一张“地图”，虽然不是很复杂（我正在制作），但它具有基本的功能，并且总体上朝着正确的方向发展 如果你看它，你可以看到一个红色的小点，在这些红色的小点上，我想鼠标移到上面，基本上可以看到文本，但是我在正确编写代码时遇到了一些麻烦 这是到目前为止所有的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

我最近制作了一张“地图”，虽然不是很复杂（我正在制作），但它具有基本的功能，并且总体上朝着正确的方向发展

如果你看它，你可以看到一个红色的小点，在这些红色的小点上，我想鼠标移到上面，基本上可以看到文本，但是我在正确编写代码时遇到了一些麻烦

这是到目前为止所有的代码

 <!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>


奥因克斯战士
奥因克斯战士
您的浏览器不支持画布元素。
var c=document.getElementById（“myCanvas”）；
var cxt=c.getContext（“2d”）；
cxt.fillStyle=“#红色”；
cxt.beginPath（）；
cxt.arc（50,50,1,0，数学PI*2，真）；
cxt.closePath（）；
cxt.fill（）；
这里有四个选项：

  • 跟踪所有点的位置，并跟踪身体上的
    mousemove
    事件。当鼠标移到点上时，用文本重新绘制画布。当鼠标移开时，清除画布并重新绘制它，而不显示文本。您必须编写自己的“命中”检测代码，以将鼠标位置与所有点的边界框/半径进行比较。这很难，但并非不可能

  • 使用画布创建自定义点，而不是整个地图的一个画布，在画布上调用
    toDataURL（）
    获取字符串，为每个点创建一个新的绝对定位
    元素，并设置
    .style.backgroundImage=url（'+myDotDataURL+'）。现在，您可以在每个div上设置
    title
    属性，让浏览器为您处理鼠标检测和工具提示显示。缺点：您将看到圆点周围正方形区域的工具提示，而不是圆点本身
  • 使用SVG代替HTML画布。在SVG中，绘制的“元素”是具有自己的事件和命中检测的实际对象。使用此功能，您可以绘制自定义点，并让浏览器为您执行所有鼠标点击操作

    • 这里有四个选项：

  • 跟踪所有点的位置，并跟踪身体上的
    mousemove
    事件。当鼠标移到点上时，用文本重新绘制画布。当鼠标移开时，清除画布并重新绘制它，而不显示文本。您必须编写自己的“命中”检测代码，以将鼠标位置与所有点的边界框/半径进行比较。这很难，但并非不可能

  • 使用画布创建自定义点，而不是整个地图的一个画布，在画布上调用
    toDataURL（）
    获取字符串，为每个点创建一个新的绝对定位
    元素，并设置
    .style.backgroundImage=url（'+myDotDataURL+'）。现在，您可以在每个div上设置
    title
    属性，让浏览器为您处理鼠标检测和工具提示显示。缺点：您将看到圆点周围正方形区域的工具提示，而不是圆点本身
  • 使用SVG代替HTML画布。在SVG中，绘制的“元素”是具有自己的事件和命中检测的实际对象。使用此功能，您可以绘制自定义点，并让浏览器为您执行所有鼠标点击操作

    •