只有当我处于 canvas 而不是我的形状时，鼠标悬停才会激活

Question

我是使用 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>

Answer 1

只检查鼠标是否在矩形上

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>

只有当我处于 canvas 而不是我的形状时，鼠标悬停才会激活

Mouseover only active once I'm on my canvas and not my shape

html

javascript

css

html5-canvas