canvas模仿windows xp电脑桌面泡泡碰撞屏幕保护动画代码
代码语言:html
所属分类:动画
代码描述:canvas模仿windows xp电脑桌面泡泡碰撞屏幕保护动画代码
代码标签: canvas 模仿 windows xp 电脑 桌面 泡泡 碰撞 屏幕 保护
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; height: 100vh; width: 100vw; background-image: url("//repo.bfw.wiki/bfwrepo/image/5f7ad191820d0.png"); background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; display: flex; justify-content: center; align-items: center; } </style> </head> <body > <canvas id="canvas"></canvas> <script > const canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const context = canvas.getContext("2d"); const bubbleImg = new Image(); bubbleImg.src = "//repo.bfw.wiki/bfwrepo/icon/6271bdb3e3e10.png"; const totalItems = 15; const itemSize = 50; const maxSpeed = 20; const colors = [ "#fbf8cc", "#fde4cf", "#ffcfd2", "#f1c0e8", "#cfbaf0", "#a3c4f3", "#90dbf4", "#8eecf5", "#98f5e1", "#b9fbc0", "#f94144", "#f3722c", "#f8961e", "#f9844a", "#f9c74f", "#90be6d", "#43aa8b", "#4d908e", "#577590", "#277da1"]; const getRandom = max => Math.floor(Math.random() * max); const getRandomColor = () => colors[getRandom(colors.length)]; const createItem = () => ({ color1: getRandomColor(), color2: getRandomColor(), color3: getRandomColor(), color4: getRandomColor(), color5: getRandomColor(), speed: getRandom(maxSpeed) + 1, x: getRandom(window.innerWidth - itemSize), y: getRandom(window.innerWidth - itemSize), vector: getRandom(Math.PI * 2), move: funct.........完整代码请登录后点击上方下载按钮下载查看
网友评论0