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