画布元素中的JavaScript球不跟随光标

JavaScript ball in a canvas element does not follow cursor

本文关键字：JavaScript 不跟随 光标 布元素 元素      更新时间：2023-09-26

我正试图用JavaScriptES6创建一个简单的程序，使球跟随我的光标。球在移动，但移动速度比我的光标快。这是代码：

index.html只是一个普通的html文档，其中有一个画布元素，ID为"game_canvas">

game.js

// global vars
game_canvas = document.getElementById("game_canvas");
class Ball {
    constructor() {
        this.ctx = game_canvas.getContext("2d");
    }
    drawCircle(X, Y) {
        this.ctx.beginPath();
        this.ctx.arc(X, Y, 15, 0, 2 * Math.PI);
        this.ctx.fillStyle = "red";
        this.ctx.fill();
    }
}
// MOUSE COORDS DETECTION
function getMousePos(event) {
    return {
        x: event.clientX,
        y: event.clientY 
    };
}
// END COORDS DETECTION
let follower = new Ball(0, 0, game_canvas);
// START EVENT LOOP
game_canvas.addEventListener("mousemove", function(event) {
    let mousePos = getMousePos(game_canvas, event);
    follower.ctx.clearRect(0, 0, game_canvas.width, game_canvas.height);
    follower.drawCircle(mousePos.x, mousePos.y);
}, false)
// END EVENT LOOP

Update我从getMousePos((函数中删除了画布参数。

我不知道为什么，所以请解释一下，但插入一个像这样的视口标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

似乎已经解决了这个问题。

相关文章：