canvas实现点击下雪动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas实现点击下雪动画效果代码

代码标签: canvas 点击 下雪 动画

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

<!DOCTYPE html>
<html lang="en" >
<head>
 
<meta charset="UTF-8">
<style>
   
@import url(https://fonts.bunny.net/css?family=architects-daughter:400);

body
{
 
margin: 0;
 
overflow: hidden;
 
background: linear-gradient(to bottom, black,#001f3f, #005f8f);
 
height: 100vh;
 
display: flex;
 
flex-direction: column;
 
justify-content: flex-start;
 
align-items: center;
 
 
font-family: 'Architects Daughter', handwriting;
 
/*
  background-image: url("https://raw.githubusercontent.com/cbolson/icodethis-challenges/main/assets/images/winter-scene.jpg");
  background-attachment: fixed;
  background-size: cover;
  */

}

canvas
{
 
display: block;
 
position: absolute;
 
top: 0;
 
left: 0;
}

button
{
 
position: fixed;
 
top: 2rem;
 
z-index: 10;
 
padding: .75rem 1rem;
 
color: #FFF;
 
background-color: rgb(225, 29, 72);
 
border: 1px solid rgba(255 255 255 / .5);
 
border-radius: 5px;
 
cursor: pointer;
 
font-size: 1.2rem;
 
font-family: inherit;
 
font-weight: 600;
 
box-shadow: 2px 2px 5px 5px rgba(0 0 0 / .5);
 
transition: background-color 300ms ease-in-out,opacity 300ms ease-in-out;
}
button:hover{
 
background-color: rgb(159, 18, 57);
}

button:disabled{
 
opacity: .2;
 
cursor: not-allowed;
}
</style>
</head>
<body>

<canvas id="snowCanvas"></canvas>
<button type="button" id="btn-snow">Let it Snow!</button>

 
<script >
     
      const canvas = document.getElementById("snowCanvas");
const btnSnow = document.getElementById("btn-snow");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let snowflakes = [];
let isSnowing = false;
const MAX_SNOWFLAKE_SIZE = 20;
const NUM_SNOWFLAKES = 200; // Number of snowflakes generated
const SMALL_SNOWFLAKE_SIZE = 10; // below this size the snowflakes will just be circles to reduce load
const THRESHOLD_SNOWFLAKES = 399; // max num of snowflakes visible at any time

// Adjust canvas size on window resize
window.addEventListener("resize", () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

// generate a random.........完整代码请登录后点击上方下载按钮下载查看

网友评论0