Web 鼠标滑过有粒子掉落

本文主要是介绍Web 鼠标滑过有粒子掉落，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近在写接口，反正环境也有了，无聊写点代码

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>粒子效果</title><style>body {margin: 0;padding: 0;overflow: hidden;}canvas {background-color: #000;position: fixed;top: 0;left: 0;width: 100%;height: 100%;}</style>
</head>
<body><canvas id="canvas" width="1232" height="645"></canvas><script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const particles = [];function createParticle(x, y) {const size = Math.random() * 20 + 10; // 随机给粒子大小const speed = (size / 30) * (Math.random() * 4 + 1); // 根据粒子的大小确定速度const brightness = (size / 30) * 100; // 根据粒子的大小确定亮度const particle = {x,y,size,color: getRandomColor(),speedX: speed,speedY: speed,brightness: brightness};particles.push(particle);}function getRandomColor() {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}function animate() {requestAnimationFrame(animate);ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < particles.length; i++) {const particle = particles[i];particle.x += particle.speedX;particle.y += particle.speedY;ctx.beginPath();ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);ctx.fillStyle = particle.color;ctx.globalAlpha = particle.brightness / 100;ctx.fill();if (particle.x - particle.size > canvas.width ||particle.x + particle.size < 0 ||particle.y - particle.size > canvas.height ||particle.y + particle.size < 0) {particles.splice(i, 1);i--;}}}function init() {canvas.addEventListener('mousemove', function(e) {const { clientX, clientY } = e;createParticle(clientX, clientY);});animate();}init();</script></body></html>