js实现canvas等离子球体放电动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现canvas等离子球体放电动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; } body { background-image: linear-gradient(200deg, #a12580 0%, #4620ad 40%, #5406b9 60%, #a12580 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <canvas id="canvas"></canvas> <script> const randomNumber = (min, max) => { return Math.random() * (max - min) + min; }; const colours = ["#EFC8ED", "#E7E4F8", "#fff"]; const c = document.getElementById("canvas"); const ctx = c.getContext("2d"); c.width = window.innerHeight / 2; c.height = c.width; const vAngle = Math.random() * 2 * Math.PI; const vMag = 1.5 * (0.6 + 0.4 * Math.random()); const maxVelComp = 2.5; let particleCount = 2; let particles = []; const createParticles = () => { for (let i = 0; i < particleCount; i++) { const newParticle = { x: c.width / 3, y: c.height / 2, velX: vMag * Math.cos(Math.random() * 2 * Math.PI), velY: vMag * Math.sin(Math.random() * 2 * Math.PI) }; particles.push(newParticle); } }; window.addEventListener("resize", e => { ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); c.width = window.innerHeight / 2; c.height = c.width; draw(); }); const container = () => { ctx.beginPath(); ctx.arc(c.width / 2, c.height / 2, c.width / 2, 0, 2 * Math.PI); ctx.shadowBlur = 0; const gradient = ctx.createRadialGradient( c.width / 2 + c.width / 2 / 1.5, c.width / 2 - c.width / 2 / 1.6, c.width / 5000, c.width / 2, c.height / 2, c.width / 1.9); gradient.addColorStop(0.01, "#ff009946"); gradient.addColorStop(0.7, "#33006610"); gradient.addColorStop(0.77, "rgba(255, 53, 149, 0.05)"); gradient.addColorStop(0.91, "rgba(255, 53, 149, 0.4)"); gradient.addColorStop(0.95, "rgba(255, 53, 149, 0.6)"); gradient.addColorStop(1, "#ff0099"); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0