为什么把鼠标事件改为onmouseover 后就没有效果了

来源：8-2 编程练习

无畏青春

2020-09-21 14:44:06

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>canvas动画</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    canvas {
        background-color: lightblue;
    }
    </style>
</head>

<body>
    <canvas width="800px" height="800px" id="canvas">您的浏览器不支持canvas</canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var posX = 100,
        posY = 0,
        dir = 1;
    var isMouseInRect = false; //判断鼠标是否在生成的方块里面
    canvas.onmousemove = function(e) {
        var mouseX = e.offsetX,
            mouseY = e.offsetY;
        if (mouseX > posX && mouseX < posX + 50 && mouseY > posY && mouseY < posY + 50) {
            isMouseInRect = true;
        } else {
            isMouseInRect = false;
        }
    }

    setInterval(function() {
        if (!isMouseInRect) { //表示当鼠标不在生成的矩形里面时 运行下面的代码
            posY += 10 * dir;
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = "green";
            context.fillRect(posX, posY, 50, 50);
            if (posY + 50 > canvas.height) {
                dir = -1;
            } else if (posY <= 0) {
                dir = 1;
            }
        }
    }, 100);
    </script>
</body>

</html>

写回答

1回答