检测鼠标悬停并显示 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>
Ive recently created a "map" although not very sophisticated (im working on it) it has the basic function and is generally heading in the right direction.
If you look at it you can see a tiny red dots and on those tiny red dots i want to mouseover it and see text basically but ive had a bit of trouble getting the code right.
http://hummingbird2.x10.mx/website%20creation/mainpage.htm
This is all the code so far.
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这里有四个选项：
跟踪所有点的位置并跟踪身体上的
mousemove事件。当鼠标移到一个点上时，用文本重新绘制画布。当鼠标移开时，清除画布并重新绘制没有文本的画布。您必须编写自己的“命中”检测代码来将鼠标位置与所有点的边界框/半径进行比较。这很难，但并非不可能。不要用一张画布来显示整个地图，而是使用画布来创建自定义点，在画布上调用
toDataURL()来获取它的字符串，创建一个新的绝对定位的.style.backgroundImage = url('+myDotDataURL+');。现在，您只需在每个 div 上设置title属性，然后让浏览器为您处理鼠标检测和工具提示显示。缺点：您将看到点周围方形区域的工具提示，而不是点本身。使用 SVG 代替 HTML Canvas。在 SVG 中，绘制的“元素”是具有自己的事件和命中检测的实际对象。使用此功能，您可以绘制自定义点，并让浏览器为您完成所有鼠标点击操作。
Here are four options:
Keep track of all the dots' locations and track the
mousemoveevent on the body. When the mouse moves over a dot, re-draw the canvas with the text. When the mouse moves off, clear the canvas and re-draw it without the text. You have to write your own 'hit' detection code to compare the mouse position to the bounding boxes/radius of all dots. It's hard, but not impossible.Instead of one canvas for the entire map, use a canvas to create your custom dot, call
toDataURL()on the canvas to get a string for it, create a new absolutely-positioned<div>element for each dot, and set the.style.backgroundImage = url('+myDotDataURL+');. Now you can just set thetitleattribute on each div, and let the browser handle the mouse detection and tooltip display for you. Downside: you will see the tooltip for a square area around the dot, not exactly the dot itself.Instead of HTML Canvas, go with SVG. In SVG drawn 'elements' are actual objects that have their own events and hit detection. With this you can draw custom dots and let the browser do all mouse hits for you.