原生js实现烟雾效果-html代码-BFW代码库

原生js实现烟雾效果

代码语言：html

所属分类：粒子

代码描述：原生js实现烟雾效果

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

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

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

canvas#canvas {
  display: block;
  background: #000;
}
</style>

</head>
<body translate="no">
<canvas id="canvas">Canvas not supported.</canvas>

<script >
(function () {
  'use strict';
  window.addEventListener('load', function () {
    var canvas = document.getElementById('canvas');

    if (!canvas || !canvas.getContext) {
      return false;
    }

    /********************
        Random Number
      ********************/

    function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    /********************
        Var
      ********************/

    // canvas 
    var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;
    var mouseX;
    var mouseY;

    /********************
                  Animation
                ********************/

    window.requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (cb) {
      setTimeout(cb, 17);
    };

    /********************
         Cloud
       ********************/

    var cloudNum = 200;
    var clouds = [];
    var radiusMin = 150;
    var radiusMax = 300;

    if (X < 768) {
      cloudNum = 100;
      radiusMin = 100;
      radiusMax = 150;
    }

    function Cloud(ctx, x, y) {
      this.ctx = ctx;
      this.init(x, y);
    }

    Cloud.prototype.init = function (x, y) {
      this.x = x;
      this.y = y;
      this.r = rand(radiusMin, radiusMax);
      this.l = rand(50, 100);
      this.v = {
        x: rand(-2, 2) * Math.random(),
        y: rand(-2, 2) * Math.random() };

      this.c = {
        r: rand(0, 255),
        g: rand(0, 255),
        b: rand(0, 255),
        a: 1 };

    };

    Cloud.prototype.wrapPosition = function () {
      if (this.x + this.r < 0) {
        this.x = X + this.r;
      }
      if (this.x - this.r > X) {
        this.x = 0 - this.r;
      }
      if (this.y + this.r < 0) {
        this.y = Y + this.r;
      }
      if (this.y - this.r > Y) {
        this.y = 0 - this.r;
      }
    };

    Cloud.prototype.updatePosition = function () {
      this.x += this.v.x;
      this.y += this.v.y;
    };

    Cloud.prototype.updateParams = function () {
      this.l -= 0.1;
      if (this.l < 0) {
        this.v.x = rand(-2, 2) * Math.random();
        this.v.y = rand(-2, 2) * Math.random();
        this.l = rand(50, 100);
      }
    };

    Cloud.prototype.resize = function () {
      this.x = rand(0 - 100, X + 100);
      this.y = rand(0 - 100, Y + 100);
    };

    Cloud.prototype.render = function () .........完整代码请登录后点击上方下载按钮下载查看