javascript - 当用户单击确切位置时，如何创建粒子？

Question

我正在尝试使用 Javascript 和 HTML5 Canvas 创建粒子，我希望 canvas 是交互式的，这意味着当用户单击页面的特定区域时，它会以随机速度、大小和颜色生成一个粒子.然后，该粒子将在整个屏幕上弹跳并持续弹跳，直到用户刷新页面。

最好的问候， tar

// 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>

Answer 1

您的粒子没有移动，因为您没有在 draw 方法中再次调用 requestAnimationFrame。我会阅读更多关于 it does 的内容.

您还需要包括每个粒子移动的 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>