当用户点击精确位置时，我该如何创建一个粒子？

Question

我正在尝试使用Javascript和HTML5 Canvas创建粒子效果，希望Canvas可以实现交互功能。也就是说，当用户在页面的特定区域单击时，它会生成一个随机速度、大小和颜色的粒子。该粒子将在屏幕上弹跳并持续弹跳，直到用户刷新页面。

祝好， Tar2ed

// Initializing the canvas
var canvas = document.getElementById("canvas");
var c = canvas.getContext('2d');

// Setting the positition in the middle of the canvas
var posX = "512",
  posY = "384";

// Creation of an array of particles
var particles = [];
for (var i = 0; i < 5; i++) {
  particles.push(new Particle());
}

// Creation of a fucntion which will help us create multiple particles
function Particle() {

  // Randomizing the position on the canvas
  this.posX = Math.random() * canvas.width;
  this.posY = Math.random() * canvas.height;
}

// Creating a draw function
function draw() {

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

  for (var d = 0; d < particles.length; d++) {
    var p = particles[d];

    // Creating the particle
    c.beginPath();
    c.fillStyle = "white";
    c.arc(p.posX, p.posY, 5, 0, Math.PI * 2, false);
    c.fill();

    // Incrementing the X and Y postition
    p.posX++;
    p.posY++;
  };
}

// Drawing the particle
window.requestAnimationFrame(draw);

<canvas id="canvas" width="1024" height="768">Your browser does not support HTML5 Canvas.</canvas>

- user11611159

Answer 1

您的粒子没有移动是因为在draw方法中没有再次调用requestAnimationFrame。我建议您阅读更多关于它的作用的内容。

您还需要包括每个粒子移动的X和Y方向。这是因为每个粒子都有自己的方向，不应该共享方向。

对于在单击时出现的粒子，只需向canvas添加一个mousedown事件并捕获坐标。然后将一个新的Particle推入数组中，以便draw可以处理它们。

您还可以使用Math.random()来控制开始的方向。

// Initializing the canvas
var canvas = document.getElementById("canvas");
var c = canvas.getContext('2d');

var dist = 5;

// Creation of an array of particles
var particles = [];

// Creation of a fucntion which will help us create multiple particles
function Particle(x, y) {

  // Randomizing the position on the canvas
  this.posX = x;
  this.posY = y;
  
  // Use Math.random() to set a random direction to start with.
  var ran = Math.random();
  if (ran < .5) {
    this.dirX = -1; // Include the X direction this particle is moving
  } else {
    this.dirX = 1; // Include the X direction this particle is moving
  }
  
  ran = Math.random();
  if (ran < .5) {
    this.dirY = -1; // Include the X direction this particle is moving
  } else {
    this.dirY = 1; // Include the X direction this particle is moving
  }
}


canvas.addEventListener("mousedown", function(event) {
  var x = event.x - canvas.offsetLeft;
  var y = event.y - canvas.offsetTop;
  particles.push(new Particle(x, y));
});


// Creating a draw function
function draw() {

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

  for (var d = 0; d < particles.length; d++) {
    var p = particles[d];

    // Creating the particle
    c.beginPath();
    c.fillStyle = "white";
    c.arc(p.posX, p.posY, 5, 0, Math.PI * 2, false);
    c.fill();
    
    p.posX += p.dirX * dist; // Move X
    p.posY += p.dirY * dist; // Move Y
    
    // Incrementing the X and Y postition
    if (p.dirX == 1 && p.posX + dist > canvas.width) { // Moving right and reached the end
        p.posX -= p.posX + dist - canvas.width;
        p.dirX *= -1 // Reverse direction
    } else if (p.dirX == -1 && p.posX < 0) { // Moving left and reached the end
        p.posX = 0;
        p.dirX *= -1; // Reverse direction
    }
    
    if (p.dirY == 1 && p.posY + dist > canvas.height) { // Moving down and reached the end
        p.posY -= p.posY + dist - canvas.height;
        p.dirY *= -1 // Reverse direction
    } else if (p.dirY == -1 && p.posY < 0) { // Moving up and reached the end
        p.posY = 0;
        p.dirY *= -1; // Reverse direction
    }  
  };
  window.requestAnimationFrame(draw); // Call me aagain recursively 
}

// Drawing the particle
window.requestAnimationFrame(draw);

<canvas id="canvas">Your browser does not support HTML5 Canvas.</canvas>

- Jimenemex

Answer 2

我对你的代码进行了一些更改。我创建了一个名为draw和一个名为update的函数来处理粒子。在创建新粒子时，您需要提供新位置。这可以是使用循环创建粒子时的随机位置，也可以是鼠标点击的位置。此外，我添加了一个用于检测鼠标位置的函数function oMousePos。现在，由于我在draw函数中添加了window.requestAnimationFrame(draw);，所以粒子正在移动，但由于粒子沿着一个方向稳定地移动，它们将消失。

您可以在mousedown事件上创建新粒子：

 canvas.addEventListener("mousedown",(e)=>{
      let m = oMousePos(canvas, e);//the position of the mouse 
      particles.push(new Particle(m))
    })

希望它有所帮助。

// Initializing the canvas
var canvas = document.getElementById("canvas");
var c = canvas.getContext('2d');


// Setting the positition in the middle of the canvas
//var posX = "512",
//  posY = "384";
var posX = canvas.width/2,
    posY = canvas.height/2;
// Creation of an array of particles
var particles = [];


// Creation of a fucntion which will help us create multiple particles
function Particle(pos) {
  
  this.posX = pos.x;
  this.posY = pos.y;
}

Particle.prototype.draw = function(){ 
    c.beginPath();
    c.fillStyle = "white";
    c.arc(this.posX, this.posY, 5, 0, Math.PI * 2, false);
    c.fill();
}
Particle.prototype.update = function(){ 
   this.posX++;
   this.posY++;
}


for (var i = 0; i < 5; i++) {
  let pos = {}
  // Randomizing the position on the canvas
  pos.x = Math.random() * canvas.width;
  pos.y = Math.random() * canvas.height;
  particles.push(new Particle(pos));
  
}

// Creating a draw function
function draw() {
  window.requestAnimationFrame(draw);
  // Painting the canvas in black
  c.fillStyle = "black";
  c.fillRect(0, 0, canvas.width, canvas.height);

  for (var d = 0; d < particles.length; d++) {
    var p = particles[d];

    // Creating the particle
    p.update();
    p.draw()
    

    // Incrementing the X and Y postition
    p.posX++;
    p.posY++;
  };
}

// Drawing the particle
window.requestAnimationFrame(draw);


canvas.addEventListener("mousedown",(e)=>{
  let m = oMousePos(canvas, e)
  particles.push(new Particle(m))
})

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

<canvas id="canvas" width="1024" height="768">Your browser does not support HTML5 Canvas.</canvas>

- enxaneta

---

谢谢您的时间！这非常有帮助！我只是几个月前开始学习JavaScript和HTML，但我真的学到了很多。 - user11611159