canvas大雪纷飞下雪动画效果代码-html代码-BFW代码库

canvas大雪纷飞下雪动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas大雪纷飞下雪动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">

<style>
    body{
        background: url(//repo.bfw.wiki/bfwrepo/image/5fc1a7f99e34f.png);
        background-size: cover;
    }
</style>
</head>
<body>

<canvas id="snow-flake-app"></canvas>

<script>
 //Here is configuration
window.animation_config = {
  generatorDelay : { min: 1, max:20 }, //in ms
  speed : 1, //1x
  x_axis_rate : 0.1, // x axis mobility
  weight : 0.5, //snow flake weight
  size : 1.5, //snow flake size
  z_axis_rate : 0.05, //z axis mobility
  color : {b : 255, a: 0.8}, //b for brightness, a for alpha, by default generates random colors but if you set brightness 255 then you'll see only white color
  wind : 0 // value's sign determines wind direction.
};
(function(){
    window.animation_config = window.animation_config || {
        generatorDelay : { min: 1, max:20 },
        isRunning : true,
        speed : 1,
        x_axis_rate : 0.1,
        weight : 0.5,
        size : 1.5,
        z_axis_rate : 0.05,
        color : {b : 255, a: 0.8},
        wind : 0
    };
    window.animation_config.isRunning = true;
    
    let canvas = document.getElementById('snow-flake-app');
    let ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const generatorDelay = { min: 1, max:1 };
    let screenBounds = { lower: 0, upper: canvas.width};
    
    window.onfocus = function() {
      //uncomment for performance
      //window.animation_config.isRunning = true;
    };
    window.onblur = function() {
      //uncomment for performance
      //window.animation_config.isRunning = false;
    };
    
    let particleArray = [];
    
    function randomInt(min = 0, max = 1){
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    function randomFloat(min = 0, max = 1){
        return (Math.random() * (max - min)) + min;  //Math.random() * (max - min + 1) + min;
    }
    function randomColor(brightness, alpha){
        return 'rgba(' + randomInt(brightness,255) + ',' + randomInt(brightness,255) + ',' + randomInt(brightness,255) + ',' + alpha + ')';
    }
    
    class Particle{
        constructor(pos, vector, z_index, size, color, weight){
            this.pos = pos;
            this.vector = vector;
            this.z_index = z_index%5;
            this.color = color;
            this.size = size%50;
            this.weight = weight%50;
        }
        
        get displaySize(){
            return Math.sqrt(this.z_index*this.size) * window.animation_config.size;
        }
        
        draw(){
            if(this.death || !(this.pos.x >= 0 && this.pos.x <= canvas.width )) return;
            ctx..........完整代码请登录后点击上方下载按钮下载查看