javascript - 使用鼠标坐标制作动画时的requestAnimationFrame

Question

将使用 requestAnimationFrame(animate) 调用的动画函数 但在 animate 函数中，我调用 is_inside ，当发生这种情况时，当我想要获取 wx 和 wy 时，我在 is_inside 函数中收到错误:未捕获的类型错误:无法读取未定义的属性“clientX” 知道如何解决这个问题吗？谢谢

function animate(event){ 
    targetX = event.clientX - canvas.getBoundingClientRect().left; 
    targetY = event.clientY - canvas.getBoundingClientRect().top; 
    canvas.style.cursor = "pointer";
    if(clicked!=true){
        if(is_inside(pointx,pointy)){
            move();
        }else{
            canvas.style.cursor = "auto";
            moveLeft();
        }
    }   
}

function is_inside(x,y){

    var wx = event.clientX - canvas.getBoundingClientRect().left;
    var wy = event.clientY - canvas.getBoundingClientRect().top;
    var distance = Math.sqrt((wx-x-400)*(wx-x-400) + (wy-y-300)*(wy-y-300));
    if(distance < 35){
        return true;
    }else {
        return false;
    }
}


canvas.addEventListener('mousemove', animate, false);

Answer 1

这是因为您无权访问请求的帧回调中的任何事件。您需要在 mousemove 事件中存储鼠标位置，然后在 animate 中使用它功能

var mousePosition = {x: 0, y: 0};

canvas.addEventListener('mousemove', event => {
    mousePosition.x = event.clientX;
    mousePosition.y = event.clientY;
}, false);

然后代替 event.clientX和event.clientY使用mousePosition.x和mousePosition.y分别