检查鼠标是否在 window 内或外

Question

我看到这类问题已经有人回答了，但是每个答案都有些模糊，或者有一些交叉兼容性问题，或者超出了我的范围 understanding.So 有没有人可以给我一个答案最新的、完整的、清晰的（显示和解释所涉及的所有步骤）答案？我不想在鼠标在 window.I 之外时让圆圈变大我没有使用 JQuery （在许多答案中有特色）。我应该使用它吗？有什么方法可以用纯 javascript 来实现吗？感谢您的帮助，如果我的代码有点多余，我们深表歉意:)

var canvas = document.querySelector("canvas");
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var mouse = {
    x: undefined,
    y: undefined
}
window.addEventListener("mousemove", function(event){
    mouse.x = event.x;
    mouse.y = event.y;
})
window.addEventListener("resize", function(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
})


var colorArray = [
    "#6CC61D",
    "#E05132",
    "#278E83",
    "#A633D4"
]

function Circle(x,y,dx,dy,radius){
    this.x  = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.color = colorArray[Math.floor(Math.random() * colorArray.length)];

    this.draw = function(){
        c.beginPath();
        c.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
        c.fillStyle = this.color;
        c.fill()
    }
    this.update = function(){
        if (this.x + this.radius>window.innerWidth  ||  this.x -this.radius<0){
            this.dx = - this.dx;}
        if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
            this.dy = - this.dy;
        }
        if (mouse.x - this.x < 50 && mouse.x - this.x > - 50 && mouse.y - this.y < 50 && mouse.y - this.y > - 50 && this.radius<50 ){
            this.radius += 1;
        }
        else if(this.radius>2){
            this.radius -= 1;
        }
        this.x += this.dx;
        this.y += this.dy;
        this.draw();
    
}
}
var circleArray = [];
for (var i = 0; i < 600; i++) {
    var x = Math.random() * (window.innerWidth - radius * 2) + radius;
    var y = Math.random() * (window.innerHeight - radius * 2) + radius;
    var dy = (Math.random() - 0.5) * 8;
    var dx = (Math.random() - 0.5) * 8;
    var radius = 30;

        circleArray.push(new Circle(x, y, dx, dy, radius));
    }




function animate(){
    requestAnimationFrame(animate);
    c.clearRect(0,0,window.innerWidth,window.innerHeight);
    for (var i = 0;i < circleArray.length;i++){
        circleArray[i].update()
    }
    circle.update();
}
animate();

Answer 1

I am not using JQuery (featured in many answers). Should I use it ?

Is there any way to implement this with pure javascript ?

根据您的喜好。由于JQuery是javascript，如果你可以用JQuery，你只能用JS来做。最有可能的是关于“它可以实施吗？”的内容。我将开始对您的代码进行一些格式化，以将逻辑（calculs/updating位置，速度和半径）与渲染（绘图）分离，这样操作起来会更容易。

检测鼠标是否超出window :

您可以使用 mouseout 事件来检测鼠标何时离开 window

window.addEventListener('mouseout', action);

当鼠标在 window 之外时，避免圆圈变大：

对于操作，将 mouse.x & mouse.y 设置回 undefined

window.addEventListener('mouseout', function(){
  mouse.x = undefined;
  mouse.y = undefined;
})

然后在你的 Circle 更新方法中再添加 2 个条件来增加半径，如果除了其他条件外，还定义了 mouse.x 和 mouse.y（所以如果鼠标在window).

if (mouse.x &&
    mouse.y &&
    Math.abs(mouse.x - this.x) < 50 &&
    Math.abs(mouse.y - this.y) < 50 &&
    this.radius < 50 ) {
    this.radius += 1;
}

结果：

const canvas = document.querySelector("canvas");
const c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const mouse = {
    x: undefined,
    y: undefined
}

window.addEventListener("mousemove", function(event){
    mouse.x = event.x;
    mouse.y = event.y;
})

window.addEventListener("resize", function(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
})

window.addEventListener('mouseout', function(){
  mouse.x = undefined;
  mouse.y = undefined;
})

const colorArray = [
    "#6CC61D",
    "#E05132",
    "#278E83",
    "#A633D4"
]

function Circle(x, y, dx, dy, radius){
    this.x  = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.color = colorArray[Math.floor(Math.random() * colorArray.length)];

    this.draw = function(){
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
        c.fillStyle = this.color;
        c.fill()
    }
    
    this.update = function(){
    
        if (this.x + this.radius > window.innerWidth  || this.x - this.radius < 0) {
            this.dx = - this.dx;
        }
        
        if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
            this.dy = - this.dy;
        }
        
        if (  mouse.x &&
              mouse.y && 
              Math.abs(mouse.x - this.x) < 50 &&
              Math.abs(mouse.y - this.y) < 50 &&
              this.radius < 50 ) {
            this.radius += 1;
        } else if(this.radius > 2) {
            this.radius -= 1;
        }
        
        this.x += this.dx;
        this.y += this.dy;
    }
}

const circleArray = [];

for (let i = 0; i < 600; i++) {
    const radius = 30;
    const x = Math.random() * (window.innerWidth - radius * 2) + radius;
    const y = Math.random() * (window.innerHeight - radius * 2) + radius;
    const dy = (Math.random() - 0.5) * 8;
    const dx = (Math.random() - 0.5) * 8;
    circleArray.push(new Circle(x, y, dx, dy, radius));
}

function clearCanvas(){
  c.clearRect(0,0,window.innerWidth,window.innerHeight);
}

function update(){
  for (let i = 0; i < circleArray.length; i++){
    circleArray[i].update()
  }
}

function draw(){
  for (let i = 0; i < circleArray.length; i++){
    circleArray[i].draw()
  }
}

function animate(){

    requestAnimationFrame(animate);
    
    clearCanvas();
    
    update();
    
    draw();
}

requestAnimationFrame(animate);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />  
</head>
<body>
  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</body>
</html>

检查鼠标是否在 window 内或外

Check if mouse is in or out of window

html

javascript

css

canvas

检测鼠标是否超出window :

当鼠标在 window 之外时，避免圆圈变大：

结果：