直接贴js代码在script里面就行了
const particle_canvas = document.createElement("canvas"); particle_canvas.setAttribute("id","particle_canvas") particle_canvas.setAttribute("width","100%") particle_canvas.setAttribute("height","100%") document.querySelector("body").appendChild(particle_canvas) const ctx = particle_canvas.getContext('2d'); particle_canvas.width = window.innerWidth; particle_canvas.height = window.innerHeight; let particles = []; let hueCol = 0; const mouse = { x: undefined, y: undefined, } particle_canvas.addEventListener('click', function(e) { mouse.x = e.x; mouse.y = e.y; for (let i = 0; i < 5; i++) { particles.push(new Particle); } }) // 注释掉鼠标移动的效果 // particle_canvas.addEventListener('mousemove', function(e) { // mouse.x = e.x; // mouse.y = e.y; // for (let i = 0; i < 5; i++) { // particles.push(new Particle); // } // }) class Particle { constructor() { this.x = mouse.x; this.y = mouse.y; this.speedX = Math.random() * 3 - 1.5; this.speedY = Math.random() * 3 - 1.5; this.color = 'hsl(' + hueCol + ', 100%, 50%)'; this.size = Math.random() * 5 + 1; } update() { this.x += this.speedX; this.y += this.speedY; this.size -= 0.1; } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, 5, 0, Math.PI * 2); ctx.fill(); } } function handleParticles() { for (var i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); for (var j = i + 1; j < particles.length; j++) { const dx = particles[j].x - particles[i].x; const dy = particles[j].y - particles[i].y; const distance = dx * dx + dy * dy; if (distance < 10000) { ctx.beginPath(); ctx.strokeStyle = particles[i].color; ctx.lineWidth = 0.3; ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.stroke(); } } if (particles.size < 0.3) { particles.splice(i, 1); i--; } } } function animate() { ctx.clearRect(0, 0, particle_canvas.width, particle_canvas.height); handleParticles(); hueCol += 2; requestAnimationFrame(animate); } animate();
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步