Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { 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; }
JavaScript
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"); ctx.fillStyle = gradient; ctx.fill(); }; const draw = () => { ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); ctx.globalCompositeOperation = "source-over"; const lines = randomNumber(10, 130); for (let i = 0; i < 5; i++) { createParticles(); } ctx.lineWidth = randomNumber(0.5, 8); ctx.strokeStyle = colours[Math.floor(randomNumber(0, colours.length))]; ctx.beginPath(); for (let i = 0; i < lines - 1; i++) { ctx.moveTo(particles[i].x, particles[i].y); var nextX = particles[i].x + (particles[i + 1].x - particles[i].x) * 0.1; var nextY = particles[i].y + (particles[i + 1].y - particles[i].y) * 0.1; ctx.lineTo(nextX, nextY); particles[i + 1].x = nextX; particles[i + 1].y = nextY; ctx.shadowBlur = 10; ctx.shadowColor = "#ff6ECA"; } ctx.stroke(); }; const update = () => { particles.forEach((particle) => { particle.velX += (1 - 2 * Math.random()) * 0.3; particle.velY += (1 - 2 * Math.random()) * 0.3; checkVelocity(particle); checkBounds(particle); particle.x += particle.velX; particle.y += particle.velY; }); }; const checkVelocity = (obj) => { if (obj.velX > maxVelComp) { obj.velX = maxVelComp; } else if (obj.velX < -maxVelComp) { obj.velX = -maxVelComp; } if (obj.velY > maxVelComp) { obj.velY = maxVelComp; } else if (obj.velY < -maxVelComp) { obj.velY = -maxVelComp; } obj.x += obj.velX; obj.y += obj.velY; }; const checkBounds = (obj) => { const radius = c.width / 2; const dx = obj.x - radius; const dy = obj.y - radius; const collision = Math.sqrt(dx * dx + dy * dy) >= radius - 10; if (collision) { var theta = Math.atan2(dy, dx); var R = radius - 10; obj.x = radius + R * Math.cos(theta); obj.y = radius + R * Math.sin(theta); obj.velX *= -1; obj.velY *= -1; } }; const animate = () => { ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); requestAnimationFrame(animate); draw(); update(); container(); }; animate();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas等离子-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号