html5的canvas绘制了个房间结构图,鼠标移动到哪个房间,哪个房间填充...
发布网友
发布时间：2022-05-07 18:16
共2个回答
热心网友
时间：2022-04-20 00:57
因为没有说明有没使用 jQuery 等语言库，所以使用原生JS来演示。
代码如下，直接复制那段JS去用就可以了。
over是进入区域的事件，out是离开区域的事件。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="myCanvas2" width="300" height="200" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var obj=document.querySelectorAll('canvas');
for(var i=0;i<obj.length;i++){
obj[i].onmouseover=function(){
this.style.backgroundColor='#ccc';
}
obj[i].onmouseout=function(){
this.style.backgroundColor='#fff';
}
}
</script>
</body>
</html>
热心网友
时间：2022-04-20 02:15
