javascript - 球跟随鼠标并延迟 Canvas-6ren

javascript - 球跟随鼠标并延迟 Canvas

转载作者：行者123 更新时间：2023-12-03 00:41:34

25

4

所以我在这里有点初学者，决定尝试学习一下使用 Canvas 。我遵循了一些教程并成功制作了一个“球”来跟随我的鼠标。它有效。然而，有一个延迟。当我移动鼠标时，“球”会跟随我的鼠标，但会有延迟。总是迟到一点点。所以我的问题是...这就是它应该的样子( Canvas 如何工作并且没有办法解决它)还是我做错了什么。

这是我的 JavaScript 代码:

let canvas = document.querySelector('canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
};

addEventListener('mousemove', function (event) {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
})

function Ball(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;

    this.update = function() {
        // eventualy some other code here...
        this.draw();
    };

    this.draw = function() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);  
        c.fillStyle = this.color;
        c.fill();
        c.closePath();
    };
};

let ball;
function init() {
    ball = new Ball(mouse.x, mouse.y, 30, 'red'); 
};

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    ball.x = mouse.x;
    ball.y = mouse.y;
    ball.update();
};

init();
animate();

我的 HTML:

<body>
    <canvas></canvas>
    <script src="javascript.js"></script>
</body>

let canvas = document.querySelector('canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
  x: innerWidth / 2,
  y: innerHeight / 2
};

addEventListener('mousemove', function(event) {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
})

function Ball(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;

  this.update = function() {
    // eventualy some other code here...
    this.draw();
  };

  this.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.fillStyle = this.color;
    c.fill();
    c.closePath();
  };
};

let ball;

function init() {
  ball = new Ball(mouse.x, mouse.y, 30, 'red');
};

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);
  ball.x = mouse.x;
  ball.y = mouse.y;
  ball.update();
};

init();
animate();

<canvas></canvas>

任何帮助将不胜感激。

附注按要求更新。这是我的整个代码。

最佳答案

您能做的最好的事情就是消除感知延迟，这种延迟只有在鼠标和移动物体同时可见时才会明显。延迟非常小，如果没有光标，人们根本不会注意到。

该示例只是在鼠标位于 Canvas 上方时隐藏鼠标。

请注意，只有在有其他东西来表示鼠标位置时才应隐藏光标。

let canvas = document.querySelector('canvas');
let c = canvas.getContext('2d');

canvas.style.cursor = "none";

canvas.width = innerWidth-40;
canvas.height = innerHeight-40;

let mouse = {
  x: innerWidth / 2,
  y: innerHeight / 2
};

addEventListener('mousemove', function(event) {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
})

function Ball(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;

  this.update = function() {
    // eventualy some other code here...
    this.draw();
  };

  this.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.fillStyle = this.color;
    c.fill();
    c.closePath();
  };
};

let ball;

function init() {
  ball = new Ball(mouse.x, mouse.y, 30, 'red');
};

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, canvas.width, canvas.height);
  ball.x = mouse.x;
  ball.y = mouse.y;
  ball.update();
};

init();
animate();

<canvas></canvas>

关于javascript - 球跟随鼠标并延迟 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53440579/

25

4

0

文章推荐： javascript - 从 Nuxt 配置文件提供资源

文章推荐： javascript - 如何在 setState 回调的回调中进行 axios 调用

Mongodb - 查找耦合文档，其中 A 跟随 B，B 跟随 A
我试图在我的数据库中找到所有关注该用户的用户。 followers 集合有 3 个字段:_id、_t、_f。当一个用户关注另一个用户时，它会将他们的用户 ID 添加到 _f 并将目标用户的 ID 添
ios - 跟随 UICollectionViewCell
我有一个 UICollectionView，它由单元格中的 UIImagePickerControl 按钮填充，我希望跟随 Collection View 末尾的单元格通过屏幕，但仍允许用户滚动 -
seo - noindex，跟随？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 9 个月前。 Improv
c# - 跟随/剪辑到形状的文本？
好的，所以我知道如何将文本剪裁成特定的几何形状，但是文本不会根据剪裁自动换行，那么如果您有“勾选”作为几何/路径？是否需要手动添加适合每一行的文本框，然后根据适合/不适合的内容拆分文本？最佳答案
jquery - 跟随 JQuery 点击事件中的链接
我里面有链接 s，但我在所有上也有一个点击事件s。代码如下所示: $( document ).ready( function() { $( 'td.event' ).click( func
Python:跟随 "path"的元组？
短版: 是)我有的: 2 元组列表，例如 [("a", "b"), ("b", "c"), ("d", "e"), ("c", "d"), ("f", "g")]不一定按字母顺序排列我想要的是: 给
PHP Xpath 跟随 sibling
我正在尝试使用 xpath 来获取表的内容。表格看起来像这样 Stuff Contents Contents Stuff
jquery - 跟随 div 内的超链接
我有几个像这样的div: My Link 问题是，如果用户单击 div 而不是文本，则链接不会触发。这是我到目前为止所拥有的: $('#TopMenuBar .MenuList').click
javascript - jQuery fadeIn() 跟随 after()
我想要做一个链接到这个 .after() 的 .fadeIn() 动画，但这似乎不是这样做的方法。有什么建议吗？ $(clicked_item).parent().parent().parent().
android - 跟随 selectQuery 有什么问题吗？
int getIdForSong(Song song){ String selectQuery = "SELECT id FROM " + TABLE_SONG + " WHERE " + S
javascript - 在一定的滚动之后使侧面 div 跟随
现在右侧的 div 一直跟随滚动。如果我想让它在页面滚动到div的顶部时开始跟随滚动，并在向上滚动时让它保持在那里，我还需要做什么？ jsfiddle $(window).scroll(functio
CSS 绝对定位 - 跟随 Div
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
javascript - 跟随 Canvas 光标的放大镜
我正在为我的客户设计一件 T 恤，我使用 html5 Canvas 制作了它。衬衫设计师现在已经完成，但他要求我添加一个放大镜(类似这样的东西:http://mlens.musings.it/)。我在
c++ - gdbserver 跟随 child
我正在尝试调试远程主机上的 fork 进程，但每次都让 gdbserver 进程在子退出时结束。尝试在 .gdbinit 中设置“set follow-fork-mode child”，没有帮助。
html - 在可滚动内容上绝对 div 跟随
我正在制作一个带有滚动控件的响应式菜单。我有一个小问题，我的渐变和控件跟随，滚动时，你可以在我的 JSFiddle 中看到它. 我的菜单控件有我的 CSS #page .page-nav .contr
javascript - 当我使用固定位置滚动时无法使 div 跟随
我将我的页面分为左右两部分。我用 div 来制作左导航和右导航。在右侧导航中，我也有多个 div。现在，当我向下滚动页面时，只有页面的右侧部分正在滚动，而左侧导航则停留在那里。所以当我向下滚动页面时
css - 跟随 svg 运动路径时的偏移量
我刚刚开始使用 svg 和 anime.js。我正在尝试重新创建 svg motion path在文档中找到我自己的 Assets 。不过，我没有使用 div 来跟随路径，而是使用了另一条路径。我有
c - 跟随 C 中的指针
我将展示整个代码，但请注意指针上方的引号，因为我将在那里讨论我的问题。我会在引用评论中告诉你我认为那里发生了什么。代码编译并运行，我只需要帮助理解部分代码。 #include #include i
html - 滚动时如何使 div 跟随？
我在左侧有一个 div，其中包括营业时间和天气。我希望该 div 根据用户的滚动方式向下和向上滚动。所以它会跟随页面上下移动。我将如何尝试呢？这是我的网站judystropicalgarden.com
c++ - 跟随 2d 播放器 openGL
所以我遇到了这个小问题，我的相机错误地固定在播放器上。左上角的蓝色 Sprite 是玩家，但它应该位于屏幕中央。关于这个问题的所有其他线程都使用固定渲染管道，而我使用基于 VBO 的线程。我的矩阵

首页

博学

6Ren·AI

商城

javascript - 球跟随鼠标并延迟 Canvas