Почему я не могу отобразить частицы на веб-странице?

Question

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

С уважением, 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 < 50; 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 < Particle.length; d++) {
    var p = particles[d];

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

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

// Drawing the particle
setInterval(draw, 33);

<canvas id="canvas"></canvas>

Answer 1

1. В цикле for: Particle.length должно быть particles.length.
2. Аргументы для c.arc неверны.Они должны быть: c.arc(p.posX, p.posY, 5, 0, Math.PI * 2);
3. Вы должны рассмотреть возможность использования window​.request​Animation​Frame() для вызова цикла отрисовки.

Демо из вашего примера:

// 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 < 50; 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);
    c.fill();

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

// Drawing the particle
setInterval(draw, 33);

<canvas id="canvas" width="310" height="160">