Question

所以我是这里的初学者，决定尝试一点点学习使用画布。我遵循了一些教程，并设法制作了一个“球”来跟随我的鼠标。而且有效。但是有一个延迟。当我移动鼠标时，“球”跟随我的鼠标，但是会延迟。总是有点晚。所以我的问题是……这是应该的（画布如何工作，没有办法解决）m还是我做错了事。

这是我的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>

任何帮助将不胜感激。

P.S。根据要求更新。这是我的全部代码。

Answer 1

您能做的最好的事情就是消除感知延迟，这只是显而易见的，因为您可以同时看到鼠标和移动的物体。延迟很小，没有光标，人们根本不会注意到。

该示例只是将鼠标悬停在画布上而隐藏。

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

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>

Answer 2

如果你还想显示鼠标，我能想到的最好方法是在球上画一只假老鼠，把真老鼠藏起来。将此代码放在绘制圆圈的位置下方：

canvas.style.cursor = 'none'

c.setLineDash([1, 0])
c.fillStyle='#fff';
c.translate(mouse.x, mouse.y)
c.beginPath()
c.moveTo(0, 0)
c.lineTo(0, 16)
c.lineTo(4, 12)
c.lineTo(8, 20)
c.lineTo(11, 19)
c.lineTo(7, 12)
c.lineTo(12, 11)
c.closePath()
c.stroke()
c.fill()
c.translate(-mouse.x, -mouse.y)

球跟随鼠标与延迟画布

2 个答案: