Canvas烟花

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// Options
var options = {
  /* Which hue should be used for the first batch of rockets? */
  startingHue: 120,
  /* How many ticks the script should wait before a new firework gets spawned, if the user is holding down his mouse button. */
  clickLimiter: 5,
  /* How fast the rockets should automatically spawn, based on ticks */
  timerInterval: 40,
  /* Show pulsing circles marking the targets? */
  showTargets: true,
  /* Rocket movement options, should be self-explanatory */
  rocketSpeed: 2,
  rocketAcceleration: 1.03,
  /* Particle movement options, should be self-explanatory */
  particleFriction: 0.95,
  particleGravity: 1,
  /* Minimum and maximum amount of particle spawns per rocket */
  particleMinCount: 25,
  particleMaxCount: 40,
  /* Minimum and maximum radius of a particle */
  particleMinRadius: 3,
  particleMaxRadius: 5
};

// Local variables
var fireworks = [];
var particles = [];
var mouse = {down: false, x: 0, y: 0};
var currentHue = options.startingHue;
var clickLimiterTick = 0;
var timerTick = 0;
var cntRocketsLaunched = 0;

// Helper function for canvas animations
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function(cb) {
      window.setTimeout(callback, 1000 / 60);
    }
})();

// Helper function to return random numbers within a specified range
function random(min, max) {
  return Math.random() * (max - min) + min;
}

// Helper function to calculate the distance between 2 points
function calculateDistance(p1x, p1y, p2x, p2y) {
  var xDistance = p1x - p2x;
  var yDistance = p1y - p2y;
  return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
}

// Setup some basic variables
var canvas = document.getElementById('canvas');
var canvasCtx = canvas.getContext('2d');
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;

// Resize canvas
canvas.width = canvasWidth;
canvas.height = canvasHeight;

// Firework class
function Firework(sx, sy, tx, ty) {  
  // Set coordinates (x/y = actual, sx/sy = starting, tx/ty = target)
  this.x = this.sx = sx;
  this.y = this.sy = sy;
  this.tx = tx; this.ty = ty;
  
  // Calculate distance between starting and target point
  this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
  this.distanceTraveled = 0;

// To simulate a trail effect, the last few coordinates will be stored
  this.coordinates = [];
  this.coordinateCount = 3;
  
  // Populate coordinate array with initial data
  while(this.coordinateCount--) {
    this.coordinates.push([this.x, this.y]);
  }
  
  // Some settings, you can adjust them if you'd like to do so.
  this.angle = Math.atan2(ty - sy, tx - sx);
  this.speed = options.rocketSpeed;
  this.acceleration = options.rocketAcceleration;
  this.brightness = random(50, 80);
  this.hue = currentHue;
  this.targetRadius = 1;
  this.targetDirection = false;  // false = Radius is getting bigger, true = Radius is getting smaller
  
  // Increase the rockets launched counter
  cntRocketsLaunched++;
};

// This method should be called each frame to update the firework
Firework.prototype.update = function(index) {
  // Update the coordinates array
  this.coordinates.pop();
  this.coordinates.unshift([this.x, this.y]);
  
  // Cycle the target radius (used for the pulsing target circle)
  if(!this.targetDirection) {
    if(this.targetRadius < 8)
      this.targetRadius += 0.15;
    else
      this.targetDirection = true;  
  } else {
    if(this.targetRadius > 1)
      this.targetRadius -= 0.15;
    else
      this.targetDirection = false;
  }
  
  // Speed up the firework (could possibly travel faster than the speed of light) 
  this.speed *= this.acceleration;
  
  // Calculate the distance the firework has travelled so far (based on velocities)
  var vx = Math.cos(this.angle) * this.speed;
  var vy = Math.sin(this.angle) * this.speed;
  this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);
  
  // If the distance traveled (including velocities) is greater than the initial distance
  // to the target, then the target has been reached. If that's not the case, keep traveling.
  if(this.distanceTraveled >= this.distanceToTarget) {
    createParticles(this.tx, this.ty);
    fireworks.splice(index, 1);
  } else {
    this.x += vx;
    this.y += vy;
  }
};

// Draws the firework
Firework.prototype.draw = function() {
  var lastCoordinate = this.coordinates[this.coordinates.length - 1];
  
  // Draw the rocket
  canvasCtx.beginPath();
  canvasCtx.moveTo(lastCoordinate[0], lastCoordinate[1]);
  canvasCtx.lineTo(this.x, this.y);
  canvasCtx.strokeStyle = 'hsl(' + this.hue + ',100%,' + this.brightness + '%)';
  canvasCtx.stroke();
  
  // Draw the target (pulsing circle)
  if(options.showTargets) {
    canvasCtx.beginPath();
    canvasCtx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI * 2);
    canvasCtx.stroke();
  }
};

// Particle class
function Particle(x, y) {
  // Set the starting point
  this.x = x;
  this.y = y;
  
  // To simulate a trail effect, the last few coordinates will be stored
  this.coordinates = [];
  this.coordinateCount = 5;
  
  // Populate coordinate array with initial data
  while(this.coordinateCount--) {
    this.coordinates.push([this.x, this.y]);
  }
  
  // Set a random angle in all possible directions (radians)
  this.angle = random(0, Math.PI * 2);
  this.speed = random(1, 10);
  
  // Add some friction and gravity to the particle
  this.friction = options.particleFriction;
  this.gravity = options.particleGravity;
  
  // Change the hue to a random number
  this.hue = random(currentHue - 20, currentHue + 20);
  this.brightness = random(50, 80);
  this.alpha = 1;
  
  // Set how fast the particles decay
  this.decay = random(0.01, 0.03);
}

// Updates the particle, should be called each frame
Particle.prototype.update = function(index) {
  // Update the coordinates array
  this.coordinates.pop();
  this.coordinates.unshift([this.x, this.y]);
  
  // Slow it down (based on friction)
  this.speed *= this.friction;
  
  // Apply velocity to the particle
  this.x += Math.cos(this.angle) * this.speed;
  this.y += Math.sin(this.angle) * this.speed + this.gravity;
  
  // Fade out the particle, and remove it if alpha is low enough
  this.alpha -= this.decay;
  if(this.alpha <= this.decay) {
    particles.splice(index, 1);
  }
}

// Draws the particle
Particle.prototype.draw = function() {
  var lastCoordinate = this.coordinates[this.coordinates.length - 1];
  var radius = Math.round(random(options.particleMinRadius, options.particleMaxRadius));
  
  // Create a new shiny gradient
  var gradient = canvasCtx.createRadialGradient(this.x, this.y, 0, this.x, this.y, radius);
  gradient.addColorStop(0.0, 'white');
  gradient.addColorStop(0.1, 'white');
  gradient.addColorStop(0.1, 'hsla(' + this.hue + ',100%,' + this.brightness + '%,' + this.alpha + ')');
  gradient.addColorStop(1.0, 'black');
  
  // Draw the gradient
  canvasCtx.beginPath();
  canvasCtx.fillStyle = gradient;
  canvasCtx.arc(this.x, this.y, radius, Math.PI * 2, false);
  canvasCtx.fill();
}

// Create a bunch of particles at the given position
function createParticles(x, y) {
  var particleCount = Math.round(random(options.particleMinCount, options.particleMaxCount));
  while(particleCount--) {
    particles.push(new Particle(x, y));
  }
}

// Add an event listener to the window so we're able to react to size changes
window.addEventListener('resize', function(e) {
  canvas.width = canvasWidth = window.innerWidth;
  canvas.height = canvasHeight = window.innerHeight;
});

// Add event listeners to the canvas to handle mouse interactions
canvas.addEventListener('mousemove', function(e) {
  e.preventDefault();
  mouse.x = e.pageX - canvas.offsetLeft;
  mouse.y = e.pageY - canvas.offsetTop;
});

canvas.addEventListener('mousedown', function(e) {
  e.preventDefault();
  mouse.down = true;
});

canvas.addEventListener('mouseup', function(e) {
  e.preventDefault();
  mouse.down = false;
});

// Main application / script, called when the window is loaded
function gameLoop() {
  // This function will rund endlessly by using requestAnimationFrame (or fallback to setInterval)
  requestAnimFrame(gameLoop);
  
  // Increase the hue to get different colored fireworks over time
  currentHue += 0.5;
  
  // 'Clear' the canvas at a specific opacity, by using 'destination-out'. This will create a trailing effect.
  canvasCtx.globalCompositeOperation = 'destination-out';
  canvasCtx.fillStyle = 'rgba(0, 0, 0, 0.5)';
  canvasCtx.fillRect(0, 0, canvasWidth, canvasHeight);
  canvasCtx.globalCompositeOperation = 'lighter';
  
  // Loop over all existing fireworks (they should be updated & drawn)
  var i = fireworks.length;
  while(i--) {
    fireworks[i].draw();
    fireworks[i].update(i);
  }
  
  // Loop over all existing particles (they should be updated & drawn)
  var i = particles.length;
  while(i--) {
    particles[i].draw();
    particles[i].update(i);
  }
  
  // Draw some text
  canvasCtx.fillStyle = 'white';
  canvasCtx.font = '14px Arial';
  canvasCtx.fillText('Rockets launched: ' + cntRocketsLaunched, 10, 24);
  
  // Launch fireworks automatically to random coordinates, if the user does not interact with the scene
  if(timerTick >= options.timerInterval) {
    if(!mouse.down) {
      fireworks.push(new Firework(canvasWidth / 2, canvasHeight, random(0, canvasWidth), random(0, canvasHeight / 2)));
      timerTick = 0;
    }
  } else {
    timerTick++;
  }
  
  // Limit the rate at which fireworks can be spawned by mouse
  if(clickLimiterTick >= options.clickLimiter) {
    if(mouse.down) {
      fireworks.push(new Firework(canvasWidth / 2, canvasHeight, mouse.x, mouse.y));
      clickLimiterTick = 0;
    }
  } else {
    clickLimiterTick++;
  }
}

window.onload = gameLoop();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg