canvas实现粒子喷射动画效果代码-html代码-BFW代码库

canvas实现粒子喷射动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现粒子喷射动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
    padding: 0;
    margin: 0;
    overflow:hidden;
}
</style>

  
</head>

<body translate="no">

<canvas id="c"></canvas>
  
      <script>


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

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var settings = {

  'basic': {

    'emission_rate': 150,
    'min_life': 0.1,
    'life_range': 2,
    'min_angle': 0,
    'angle_range': 360,
    'min_speed': 50,
    'speed_range': 15,
    'min_size': 3,
    'size_range': 2,
    'start_colours': [
    [130, 196, 245, 1],
    [69, 152, 212, 1]],

    'end_colours': [
    [130, 196, 245, 0],
    [69, 152, 212, 0]] } };




var Particle = function (x, y, angle, speed, life, size, start_colour, colour_step) {

  /* the particle's position */

  this.pos = {

    x: x || 0,
    y: y || 0 };


  /* set specified or default values */

  this.speed = speed || 5;

  this.life = life || 1;

  this.size = size || 2;

  this.lived = 0;

  /* the particle's velocity */

  var radians = angle * Math.PI / 180;

  this.vel = {

    x: Math.cos(radians) * speed,
    y: -Math.sin(radians) * speed };


  /* the particle's colour values */
  this.colour = start_colour;
  this.colour_step = colour_step;
};

var Emitter = function (x, y, settings) {

  /* the emitter's position */

  this.pos = {

    x: x,
    y: y };


  /* set specified values */

  this.settings = settings;

  /* How often the emitter needs to create a particle in milliseconds */

  this.emission_delay = 1000 / settings.emission_rate;

  /* we'll get to these later */

  this.last_update = 0;

  this.last_emission = 0;

  /* the emitter's particle objects */

  this.particles = [];
};

Emitter.prototype.update = function () {

  /* set the last_update variable to now if it's the first update */

  if (!this.last_update) {

    this.last_update = Date.now();

    return;
  }

  /* get the current time */

  var time = Date.now();

  /* work out the milliseconds since the last update */

  var dt = time - this.last_update;

  /* add them to the milliseconds since the last particle emission */

  this.last_emission += dt;

  /* set last_update to now */

  this.last_update = time;

  /* check if we need to emit a new particle */

  if (this.last_emission > this.emission_delay) {

    /* .........完整代码请登录后点击上方下载按钮下载查看