добавление движения мыши к анимации холста - PullRequest
Новая
       15

добавление движения мыши к анимации холста

0 голосов
/ 24 сентября 2018

Я сделал анимацию на холсте html, но теперь я хочу, чтобы источник, из которого происходят шары, перемещался по холсту в соответствии с моим положением мыши.Я хочу добавить функцию события мыши, но, кажется, не могу добавить в код логическую схему и добавить, любая помощь будет принята! 

function runParticles () {
  var canvas = document.createElement("canvas");
  c = canvas.getContext("2d");
  var particles = {};
  var particleIndex = 0;
  var particleNum = 15;

  // set canvas size
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // add canvas to body
  document.body.appendChild(canvas);

  // style the canvas
  c.fillStyle = "black";
  c.fillRect(0, 0, canvas.width, canvas.height);

  function Particle() {
  this.x = canvas.width / 2;
  this.y = canvas.height / 2;
  this.vx = Math.random() * 10 - 5;
  this.vy = Math.random() * 10 - 5;
  this.gravity = 0.3;
  particleIndex++;
  particles[particleIndex] = this;
  this.id = particleIndex;
  this.life = 0;


  this.maxLife = Math.random() * 30 + 60;


  this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
  }

  Particle.prototype.draw = function() {
  this.x += this.vx;
  this.y += this.vy;


  if (Math.random() < 0.1) {
      this.vx = Math.random() * 10 - 5;
      this.vy = Math.random() * 10 - 5;
  }

  this.life++;
  if (this.life >= this.maxLife) {
      delete particles[this.id];
  }

  c.fillStyle = this.color;
  //c.fillRect(this.x, this.y, 5, 10);
  c.beginPath();
  c.arc(this.x, this.y, 2.5, degToRad(0), degToRad(360));
  c.fill();
  };

  setInterval(function() {
  //normal setting before drawing over canvas w/ black background
  c.globalCompositeOperation = "source-over";
  c.fillStyle = "rgba(0,0,0,0.5)";
  c.fillRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < particleNum; i++) {
      new Particle();
  }

  // c.globalCompositeOperation = "darken";

  for (var i in particles) {
      particles[i].draw();
  }
  }, 30);
}

function degToRad(deg) {
            var radians = (deg * Math.PI / 180) - Math.PI / 2;
            return radians;
        }
<!DOCTYPE html5>
<html>

<head>
  <title>disturbed</title>

  <script src="toto.js" type="text/javascript"></script>
  <script>
    window.onload = () => runParticles();
  </script>
</head>

<body>
</body>

</html>

1 Ответ

0 голосов
/ 24 сентября 2018
  1. Я добавил функцию для определения положения мыши: 
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
    return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
}
Я объявил переменную m (мышь). 
var m = {x:canvas.width/2,y:canvas.height/2};

и я изменил происхождение частиц с this.x = canvas.width / 2; this.y = canvas.height / 2; на this.x = m.x; this.y = m.y;

Это позиция, когда мышь не перемещается по холсту

Я добавил событие "mousemove".Когда мышь перемещается по холсту, она меняет положение. 
canvas.addEventListener("mousemove", (evt)=>{
  m = oMousePos(canvas, evt);
})

Я также добавил событие "mouseleave".Когда мышь покидает холст, она возвращается в центр. 

canvas.addEventListener("mouseleave", (evt)=>{
  m = {x:canvas.width/2,y:canvas.height/2};
})
Также я изменил setInterval для requestAnimationFrame (гораздо более эффективный).Код внутри - это ваш код. 

function runParticles () {
  var canvas = document.createElement("canvas");
  c = canvas.getContext("2d");
  var particles = {};
  var particleIndex = 0;
  var particleNum = 8;

  // set canvas size
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  var m = {x:canvas.width/2,y:canvas.height/2};///////

  // add canvas to body
  document.body.appendChild(canvas);

  // style the canvas
  c.fillStyle = "black";
  c.fillRect(0, 0, canvas.width, canvas.height);

  function Particle() {
  this.x = m.x;//////////
  this.y = m.y;//////////
  this.vx = Math.random() * 10 - 5;
  this.vy = Math.random() * 10 - 5;
  this.gravity = 0.3;
  particleIndex++;
  particles[particleIndex] = this;
  this.id = particleIndex;
  this.life = 0;


  this.maxLife = Math.random() * 30 + 60;


  this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
  }

  Particle.prototype.draw = function() {
  this.x += this.vx;
  this.y += this.vy;


  if (Math.random() < 0.1) {
      this.vx = Math.random() * 10 - 5;
      this.vy = Math.random() * 10 - 5;
  }

  this.life++;
  if (this.life >= this.maxLife) {
      delete particles[this.id];
  }

  c.fillStyle = this.color;
  //c.fillRect(this.x, this.y, 5, 10);
  c.beginPath();
  c.arc(this.x, this.y, 2.5, degToRad(0), degToRad(360));
  c.fill();
  };
  
function Draw() {
  window.requestAnimationFrame(Draw);
  c.globalCompositeOperation = "source-over";
  c.fillStyle = "rgba(0,0,0,0.5)";
  c.fillRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < particleNum; i++) {
      new Particle();
  }

  // c.globalCompositeOperation = "darken";

  for (var i in particles) {
      particles[i].draw();
  } 
  }
  
  Draw();
  
  
///////////////////
canvas.addEventListener("mousemove", (evt)=>{
  m = oMousePos(canvas, evt);
})
canvas.addEventListener("mouseleave", (evt)=>{
  m = {x:canvas.width/2,y:canvas.height/2};
})
///////////////////
   
}

function degToRad(deg) {
            var radians = (deg * Math.PI / 180) - Math.PI / 2;
            return radians;
        }


runParticles();




function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
	return { //objeto
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
  }
}
body,canvas{margin:0;padding:0;}

Надеюсь, это поможет.

...