我是一个使用canvas和javascript的初学者，我正在尝试使用鼠标悬停。我必须让它工作一点，但只有当鼠标位于 Canvas 上时，我想让我的正方形颜色在鼠标位于其上时发生变化。
我怎样才能让它工作？
这是我的代码:
window.onload = function()
{
canvasEvent();
}
function canvasEvent()
{
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.rect(150, 150, 100, 100);
ctx.fillStyle = "blue";
ctx.fill();
ctx.stroke();
c.addEventListener("mouseover", hover, false);
c.addEventListener("mouseout", hoverOut, false);
}
function hover(e)
{
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();
}
function hoverOut(e)
{
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle = 'blue';
ctx.fill();
}canvas#canvas{
background-color:#DDDDDD;
display: block;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<canvas id="canvas" width="550" height="400"></canvas>
</center>
</body>
</html>最佳答案
只需检查鼠标是否在矩形上
window.onload = function()
{
canvasEvent();
}
function canvasEvent()
{
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.rect(150, 150, 100, 100);
ctx.fillStyle = "blue";
ctx.fill();
ctx.stroke();
c.addEventListener("mousemove", e => {
if (
e.offsetX >=150 &&
e.offsetX <= 250 &&
e.offsetY >= 150 &&
e.offsetY<=250){
hover();
}
else{
hoverOut();
}
});
}
function hover(e)
{
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();
}
function hoverOut(e)
{
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle = 'blue';
ctx.fill();
}canvas#canvas{
background-color:#DDDDDD;
display: block;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<canvas id="canvas" width="550" height="400"></canvas>
</center>
</body>
</html>关于javascript - 鼠标悬停仅在我位于 Canvas 上而不是形状上时才激活，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72017614/