canvas实现点击下雪动画效果代码
代码语言:html
所属分类:动画
代码描述: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