canvas+map/area实现鼠标经过提示信息_canvas鼠标划过时提示-CSDN博客

本文链接：https://blog.csdn.net/qq_28020627/article/details/69019497

这篇博客展示了如何结合canvas和HTML map/area元素，实现在鼠标悬停在不同区域（圆形标记）时显示相应的提示信息。通过JavaScript动态绘制圆形并连接成多级联动效果，同时在鼠标移出时隐藏提示。示例代码中详细解释了事件监听、图形绘制和样式调整等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8"/>
<title>canvas多级联动</title>
<style>
#mes{
width: 200px;
height: 50px;
border-radius: 10px;
position: absolute;
left:30px;
top:0;
display: none;
background-color: #fff;
padding:10px;
border: 2px solid #f00;
}
</style>
</head>
<body>
<div style="position: relative;" id="test">
<div id="mes"></div>
<canvas id="canvas" width="400px" height="250px"
style="background-color: #ddd;" >
</canvas>
<img src="" id="im" style="border: 1px solid #f00" usemap="#map" >
<map id="map" name="map">
<area shape="circle" coords="100,100,10" id="t1"/>
<area shape="circle" coords="130,110,10" id="t2"/>
<area shape="circle" coords="160,140,10" id="t3"/>
<area shape="circle" coords="190,90,10" id="t4"/>
<area shape="circle" coords="220,70,10" id="t5"/>
<area shape="circle" coords="250,120,10" id="t6"/>
<area shape="circle" coords="280,140,10" id="t7"/>
<area shape="circle" coords="310,120,10" id="t8"/>
</map>
</div>

<script>

for(var i=1;i<9;i++){
(function(i){
document.getElementById("t"+i).onmouseenter = function(e){
var mes = document.getElementById("mes");
mes.innerHTML = "这是第"+i+"月份数据";

var x = e.clientX;
var y = e.clientY+20;

mes.style.left =x+"px";
mes.style.top =y+"px";
mes.style.display = "block";
};
document.getElementById("t"+i).onmouseout = function(e){

var mes = document.getElementById("mes");
mes.style.display = "none";
}
})(i);
}

function drawCircle(cxt,x,y,r){
cxt.beginPath();
cxt.arc(x,y,r,0,Math.PI*2);
cxt.closePath();
cxt.fill();
}

function drawLine(cxt,x1,y1,x2,y2){
cxt.beginPath();
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.closePath();
cxt.stroke();
}
function A(){

var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");

cxt.fillStyle = "#f00";

drawCircle(cxt,100,100,7);
drawCircle(cxt,130,110,7);
drawCircle(cxt,160,140,7);
drawCircle(cxt,190,90,7);

drawCircle(cxt,220,70,7);
drawCircle(cxt,250,120,7);
drawCircle(cxt,280,140,7);
drawCircle(cxt,310,120,7);
cxt.strokeStyle ="#00f";
drawLine(cxt,100,100,130,110);
drawLine(cxt,130,110,160,140);
drawLine(cxt,160,140,190,90);

drawLine(cxt,190,90,220,70);
drawLine(cxt,220,70,250,120);
drawLine(cxt,250,120,280,140);
drawLine(cxt,280,140,310,120);

var ss = canvas.toDataURL("image/png")
document.getElementById("im").src = ss;
document.getElementById("test")
.removeChild( document.getElementById("canvas"));
}

A();
</script>
</body>
</html>