canvas实现带有积雪堆积和雾气效果的下雪动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas实现带有积雪堆积和雾气效果的下雪动画代码

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

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

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

  
  
<style>
body {
	margin: 0;
	padding: 0;
	background-image: linear-gradient(to bottom, #00111a, #00334d, #005580);
	background: url("//repo.bfw.wiki/bfwrepo/image/6769f4638f94d.png") repeat-x;
	background-position: center bottom;
	background-size: cover;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	position: relative;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#snow-canvas-1 {
	z-index: 6;
}
#snow-canvas-2 {
	z-index: 5;
}
#snow-canvas-3 {
	z-index: 4;
}
#snow-canvas-4 {
	z-index: 3;
}
#snow-canvas-5 {
	z-index: 2;
}
#snow-canvas-6 {
	z-index: 1;
}

.clouds-bg {
	width: 100vw;
	height: 100vh;
	z-index: 1;
	background: url("//repo.bfw.wiki/bfwrepo/icon/6769f4838e594.png") repeat-x;
	background-size: cover;
	animation: moveClouds 200s linear infinite;
	backdrop-filter: saturate(200%);
	mix-blend-mode: plus-lighter;
}

@keyframes moveClouds {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -2000px 0;
	}
}
</style>



  
  
</head>

<body translate="no">
  <div class="clouds-bg"></div>
<canvas id="snow-canvas-1"></canvas>
<canvas id="snow-canvas-2"></canvas>
<canvas id="snow-canvas-3"></canvas>
<canvas id="snow-canvas-4"></canvas>
<canvas id="snow-canvas-5"></canvas>
<canvas id="snow-canvas-6"></canvas>
  
      <script >
const TOTAL_NUM_FLAKES = 300;
const SNOW_SYMBOLS = ["•", "❅", "❆", "❄"];

const LAYERS = [
{
  layer: 1,
  sizeMin: 24,
  sizeMax: 40,
  speedFactor: 0.12,
  swayAmpMin: 10,
  swayAmpMax: 30,
  opacity: 1,
  blur: 0,
  colorVariationMin: 255,
  colorVariationMax: 255,
  symbols: ["•"],
  zIndex: 6 },

{
  layer: 2,
  sizeMin: 20,
  sizeMax: 28,
  speedFactor: 0.09,
  swayAmpMin: 10,
  swayAmpMax: 25,
  opacity: 0.85,
  blur: 2,
  colorVariationMin: 255,
  colorVariationMax: 255,
  symbols: ["•"],
  zIndex: 5 },

{
  layer: 3,
  sizeMin: 16,
  sizeMax: 24,
  speedFactor: 0.07,
  swayAmpMin: 10,
  swayAmpMax: 20,
  opacity: 0.75,
  blur: 4,
  colorVariationMin: 255,
  colorVariationMax: 255,
  symbols: ["•"],
  zIndex: 4 },

{
  layer: 4,
  sizeMin: 12,
  sizeMax: 18,
  speedFactor: 0.05,
  swayAmpMin: 10,
  swayAmpMax: 20,
  opacity: 0.65,
  blur: 5,
  colorVariationMin: 220,
  colorVariationMax: 229,
  symbols: ["•"],
  zIndex: 3 },

{
  layer: 5,
  sizeMin: 10,
  sizeMax: 14,
  speedFactor: 0.03,
  swayAmpMin: 10,
  swayAmpMax: 20,
  opacity: 0.55,
  blur: 7,
  colorVariationMin: 210,
  colorVariationMax: 219,
  symbols: ["•"],
  zIndex: 2 },

{
  layer: 6,
  sizeMin: 8,
  sizeMax: 12,
  speedFactor: 0.01,
  swayAmpMin: 10,
  swayAmpMax: 20,
  opacity: 0.4,
  blur: 30,
  colorVariationMin: 200,
  colorVariationMax: 209,
  symbols: ["•"],
  zIndex: 1 }];



class SnowLayer {
  constructor(canvasId, layerProps) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext("2d");
    this.layerProps = layerProps;
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.canvas.width = this.width * window.devicePixelRatio;
    this.canvas.height = this.height * window.devicePixelRatio;
    this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    this.snowflakes = [];
    this.snowPileHeights = [];
    this.SEGMENT_WIDTH = 5;
    this.NUM_SEGMENTS = Math.ceil(this.width / this.SEGMENT_WIDTH);
    this.initializeSnowPiles();
    this.createSnowflakes(Math.floor(TOTAL_NUM_FLAKES / LAYERS.length));
  }

  initializeSnowPiles() {
    this.snowPileHeights = [];
    this.NUM_SEGMENTS = Math.ceil(this.width / this.SEGMENT_WIDTH);
    for (let j = 0; j < this.NUM_SEGMENTS; j++) {
      if (j === 0) {
        this.snowPileHeights[j] = this.height - 30 + (Math.random() * 10 - 5);
      } else {
        const previousHeight = this.snowPileHeights[j - 1];
        let delta = Math.random() * 10 - 5;
        let newHeight = previousHeight + delta;

        const maxHeight = this.height - 10;
        const minHeight = this.height - 100;
        if (newHeight > maxHeight) {
          newHeight = maxHeight;
        } else if (newHeight < minHeight) {
          newHeight = minHeight;
        }

        this.snowPileHeights[j] = newHeight;
      }
    }
    this.smoothSnowPile(2);
  }

  smoothSnowPile(iterations = 1) {
    for (let iter = 0; iter < iterations; iter++) {
      const temp = [...this.snowPileHeights];
      for (let i = 1; i < this.NUM_SEGMENTS - 1; i++) {
        temp[i] =
        (this.snowPileHeights[i - 1] +
        this.snowPileHeights[i] +
        this.snowPileHeights[i + 1]) /
        3;
      }
      this.snowPileHeights = temp;
    }
  }

  createSnowflakes(numFlakes) {
    for (let i = 0; i < numFlakes; i++) {
      this.snowflakes.push(this.createSnowflake());
    }
  }

  createSnowflake() {
    const symbol = this.layerProps.symbols[
    Math.floor(Math.random() * this.layerProps.symbols.length)];

    const layerProps = this.layerProps;

    const size =
    Math.random() * (lay.........完整代码请登录后点击上方下载按钮下载查看