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