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

代码语言:html

所属分类:动画

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

代码标签: 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);
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0