canvas多彩烟花燃放天空绽放动画效果代码-html代码-BFW代码库

canvas多彩烟花燃放天空绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas多彩烟花燃放天空绽放动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}
</style>


</head>

<body>
  


  
      <script >
var rnd = Math.random,
flr = Math.floor;

let canvas = document.createElement('canvas');
document.getElementsByTagName('body')[0].appendChild(canvas);
canvas.style.position = 'absolute';
canvas.style.width = '100%';
canvas.style.height = '100%';

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

let ctx = canvas.getContext('2d');

function rndNum(num) {
  return rnd() * num + 1;
}

function vector(x, y) {
  this.x = x;
  this.y = y;

  this.add = function (vec2) {
    this.x = this.x + vec2.x;
    this.y = this.y + vec2.y;
  };
}

function particle(pos, vel) {
  this.pos = new vector(pos.x, pos.y);
  this.vel = vel;
  this.dead = false;
  this.start = 0;

  this.update = function (time) {
    let timeSpan = time - this.start;

    if (timeSpan > 500) {
      this.dead = true;
    }

    if (!this.dead) {
      this.pos.add(this.vel);
      this.vel.y = this.vel.y + gravity;
    }
  };

  this.draw = function () {
    if (!this.dead) {
      drawDot(this.pos.x, this.pos.y, 1);
    }
  };

}

function firework(x, y) {

  this.pos = new vector(x, y);
  this.vel = new vector(0, -rndNum(10) - 3);
  this.color = 'hsl(' + rndNum(360) + ', 100%, 50%)';
  this.size = 4;
  this.dead = false;
  this.start = 0;
  let exParticles = [],
  exPLen = 100;

  let rootShow = true;

  this.update = function (time) {
    if (this.dead) {
      return;
    }

    rootShow = this.vel.y < 0;

    if (rootShow) {
      this.pos.add(this.vel);
      this.vel.y = this.vel.y + gravity;
    } else {
      if (exParticles.length === 0) {
        flash = true;
        for (let i = 0; i < exPLen; i++) {
          exParticles.push(new particle(this.pos, new vector(-rn.........完整代码请登录后点击上方下载按钮下载查看