EffectHub.com: your best source for gaming

Recommendation

More Effects...

window.addEventListener("resize", resizeCanvas, false);
window.addEventListener("DOMContentLoaded", onLoad, false);

window.requestAnimationFrame = 
  window.requestAnimationFrame       || 
  window.webkitRequestAnimationFrame || 
  window.mozRequestAnimationFrame    || 
  window.oRequestAnimationFrame      || 
  window.msRequestAnimationFrame     || 
  function (callback) {
  window.setTimeout(callback, 1000/60);
};

var canvas, ctx, w, h, particles = [], probability = 0.04,
    xPoint, yPoint;

var img = new Image();
img.src = "img/fire.png";

function onLoad() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  resizeCanvas();

window.requestAnimationFrame(updateWorld);
} // fin de onLoad();

function resizeCanvas() {
  if (!!canvas) {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
  }
} // fin de resizeCanvas();

function updateWorld() {
  update();
  paint();
  window.requestAnimationFrame(updateWorld);
} // fin de update();

function paint() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = "rgba(0,0,0,0.2)";
  ctx.fillRect(0, 0, w, h);
  ctx.globalCompositeOperation = 'lighter';
  for (var i=0; i<particles.length; i++) {
    particles[i].draw(ctx);
  }
} // fin de paint();

function Particle() {
  this.w = this.h = Math.random()*4+1;
  // Position
  this.x = xPoint-this.w/2;
  this.y = yPoint-this.h/2;
  // Velocidades x e y entre -5 y +5
  this.vx = (Math.random()-0.5)*10;
  this.vy = (Math.random()-0.5)*10;
  // Tiempo de vida
  this.alpha = Math.random()*.5+.5;
  // color
  this.color;
} // fin de Particle();

Particle.prototype = {
  gravity: 0.05,
  move: function () {
    this.x += this.vx;
    this.vy += this.gravity;
    this.y += this.vy;
    this.alpha -= 0.01;
    if (this.x <= -this.w || this.x >= screen.width ||
        this.y >= screen.height ||
        this.alpha <= 0) {
      return false;
    }
    return true;
  },
  draw: function (c) {
    c.save();
    c.beginPath();

c.translate(this.x+this.w/2, this.y+this.h/2);
    c.arc(0, 0, this.w, 0, Math.PI*2);
    c.fillStyle = this.color;
    c.globalAlpha = this.alpha;

c.closePath();
    c.fill();
    c.restore();
  }
} // fin de Particle.prototype;

CSS

HTML

Recommendation

Join Effecthub.com