Как я могу остановить слушателя событий от замедления анимации холста? - PullRequest
Новая
       11

Как я могу остановить слушателя событий от замедления анимации холста?

0 голосов
/ 24 апреля 2018

Я работаю над анимацией холста и только начал добавлять слушателей событий. К сожалению, когда я добавил слушателя, чтобы отслеживать местоположение курсора, анимация значительно замедляется при каждом перемещении мыши. Если я нажимаю, он полностью останавливается. Я предполагаю, что это слишком много для обработки, так есть ли способ улучшить время выполнения анимации? Будет ли это работать с веб-работниками? 

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
//Variables for the blue ball
var bx = Math.random() * innerWidth;
var by = Math.random() * innerHeight;
var bbdx = 1;
var bbdy = 1;
var bRadius = 12;
//Variables for the red balls
var rx = Math.random() * innerWidth;
var ry = Math.random() * innerHeight;
var rrdx = 1;
var rrdy = 1;
var rRadius = 12;
//Mouse coordinate object
var mouse = {
  x: undefined,
  y: undefined
}

function bCircle() {
  c.beginPath();
  c.arc(bx, by, bRadius, 0, Math.PI * 2, false);
  c.strokeStyle = "white";
  c.stroke();
  c.fillStyle = "cornflowerblue";
  c.fill();
  c.closePath();

  //Ball bouncing Conditional
}

function rCircle() {
  c.beginPath();
  c.arc(rx, ry, rRadius, 0, Math.PI * 2, false);
  c.strokeStyle = "pink";
  c.stroke();
  c.fillStyle = "red";
  c.fill();
  c.closePath();
  //Ball Bouncing Conditional
}

//Interactivity function
function bClick() {
  window.addEventListener('mousemove', function(event) {
    mouse.x = event.x;
    mouse.y = event.y;
    console.log(mouse);
  });
}

function draw() {
  c.clearRect(0, 0, innerWidth, innerHeight);
  bCircle();
  rCircle();

  //bCircle Conditional
  if (bx + bRadius > innerWidth || bx - bRadius < 0) {
    bbdx = -bbdx;
  }
  //Conditional to mall the ball bounce up and down
  if (by + bRadius > innerHeight || by - bRadius < 0) {
    bbdy = -bbdy;
  }
  //Add 1 to x continously for it to move
  bx += bbdx;
  //Add 1 constantly to y for it to move up and down also
  by += bbdy;

  //rCircle Conditional
  if (rx + rRadius > innerWidth || rx - rRadius < 0) {
    rrdx = -rrdx;
  }
  if (ry + rRadius > innerHeight || ry - rRadius < 0) {
    rrdy = -rrdy;
  }
  rx += rrdx;
  ry += rrdy;

  bClick();
}

setInterval(function() {
  draw();
}, 8);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Tap-Tap</title>

  <style type="text/css">
    canvas {
      border: 1px solid black;
    }
    
    body {
      margin: 0;
      background-color: black;
    }
  </style>
</head>

<body>
  <canvas></canvas>

  <script src="ball.js" type="text/javascript"></script>

</body>

</html>

1 Ответ

0 голосов
/ 25 апреля 2018

Вы добавляете этот обработчик события mousemove избыточно при каждом вызове к draw().API .addEventListener() не удаляет ранее добавленные обработчики.Через некоторое время их будет сотни, и браузер будет вызывать всех и каждого.

Вызовите bClick() один раз за пределами обработчика таймера.Кроме того, вызов console.log() в обработчике mousemove не влияет на производительность.

...