Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { margin: 0; padding: 0; background: #241C1F; } canvas { margin: 0 auto; display: block; border-left: 0; border-right: 0; } p { position: absolute; margin: 10px; color: #ffffff; }
JavaScript
// small particle system with satellites // standard shim window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ) { window.setTimeout(callback, 1000 / 60); }; })(); // helper functions function randomMax(max) { return Math.floor(Math.random() * max); } function getParticleColor(transparent) { var r = (100 + randomMax(155)); var g = (100 + randomMax(155)); var b = (100 + randomMax(155)); if (transparent) { return 'rgba(' + r + ',' + g + ',' + b + ',' + '0.8)'; } else { return 'rgb(' + r + ',' + g + ',' + b + ')'; } } // dom stuff and fps counter var canvas = document.getElementById('mainCanvas'); var fpsOut = document.getElementById('fps'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); var fps = 0, now, lastUpdate = (new Date())*1 - 1, fpsFilter = 50; // globals var particleBackground = 'rgba(36, 28, 31, 0.8)', minParticleSize = 15, particleSizeDelta = 10, minOrbitRadius = minParticleSize + particleSizeDelta, maxSatOrbitRadius = minOrbitRadius + 15, minSatSize = 3, satSizeDelta = 5, maxParticleSpeed = 5, maxSatOrbitSpeed = 0.07; numParticles = 10, numSat = 4; var Satellite = function (orbit) { this.r = minSatSize + randomMax(satSizeDelta); this.orbit = orbit; this.ax = 2 * Math.PI * Math.random(); this.ay = 2 * Math.PI * Math.random(); this.dx = maxSatOrbitSpeed * Math.random(); this.dy = maxSatOrbitSpeed * Math.random(); this.color = getParticleColor(); this.x = 0; this.y = 0; this.forward = false; }; var Particle = function () { var particleOffset = minParticleSize + particleSizeDelta + 2 * maxParticleSpeed; this.x = Math.round(particleOffset + Math.random() * (canvas.width - 2 * particleOffset)); this.y = Math.round(particleOffset + Math.random() * (canvas.height - 2 * particleOffset)); this.dx = maxParticleSpeed * Math.random() * (Math.random() > 0.5 ? 1 : -1); this.dy = maxParticleSpeed * Math.random() * (Math.random() > 0.5 ? 1 : -1); this.r = minParticleSize + randomMax(particleSizeDelta); this.color = getParticleColor(true); this.createSat(); }; Particle.prototype.draw = function (id) { for (var l = 0; l < particleSystem.particles.length; l++) { if (l !== id && this.colidesWith(particleSystem.particles[l])) { var newDx = (Math.abs(this.dx) + Math.abs(particleSystem.particles[l].dx)) / 2; var newDy = (Math.abs(this.dy) + Math.abs(particleSystem.particles[l].dy)) / 2; this.dx = (this.dx > 0 ? -1 : 1) * newDx; this.dy = (this.dy > 0 ? -1 : 1) * newDy; particleSystem.particles[l].dx = (particleSystem.particles[l].dx > 0 ? -1 : 1) * newDx; particleSystem.particles[l].dy = (particleSystem.particles[l].dy > 0 ? -1 : 1) * newDy; } } this.x += this.dx; this.y += this.dy; if (this.x + this.dx + 2 * this.r < 0) { this.x = canvas.width; } if (this.x + this.dx - 2 * this.r > canvas.width) { this.x = 0; } if (this.y + this.dy + 2 * this.r < 0) { this.y = canvas.height; } if (this.y + this.dy - 2 * this.r > canvas.height) { this.y = 0; } for (var j = 0; j < this.satellites.length; j++) { this.satellites[j].ax += this.satellites[j].dx; this.satellites[j].ay += this.satellites[j].dy; this.satellites[j].x = Math.sin(this.satellites[j].ax) * this.satellites[j].orbit; this.satellites[j].y = Math.cos(this.satellites[j].ay) * this.satellites[j].orbit; if (Math.cos(this.satellites[j].ax) < 0 || Math.sin(this.satellites[j].ay) < 0) { this.satellites[j].forward = true; } else { this.satellites[j].forward = false; this.drawSat(this.satellites[j]); } } ctx.beginPath(); var fillStyle = ctx.createRadialGradient(this.x, this.y, this.r * 0.3, this.x, this.y, this.r); fillStyle.addColorStop(0, this.color); fillStyle.addColorStop(0.3, particleBackground); fillStyle.addColorStop(0.6, particleBackground); fillStyle.addColorStop(0.7, this.color); fillStyle.addColorStop(0.8, particleBackground); fillStyle.addColorStop(0.9, particleBackground); fillStyle.addColorStop(1, this.color); ctx.fillStyle = fillStyle; ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fill(); for (var k = 0; k < this.satellites.length; k++) { var sat = this.satellites[k]; if (sat.forward) { this.drawSat(sat); } } }; Particle.prototype.createSat = function () { this.satellites = []; for (var i = 0; i < numSat; i++) { this.satellites.push(new Satellite(minOrbitRadius + maxSatOrbitRadius * Math.random())); } }; Particle.prototype.drawSat = function (sat) { ctx.beginPath(); var fillStyleSat = ctx.createRadialGradient(this.x + sat.x, this.y + sat.y, sat.r * 0.3, this.x + sat.x, this.y + sat.y, sat.r); fillStyleSat.addColorStop(0, sat.color); fillStyleSat.addColorStop(1, particleBackground); ctx.fillStyle = fillStyleSat; ctx.arc(this.x + sat.x, this.y + sat.y, sat.r, 0, Math.PI * 2); ctx.fill(); }; Particle.prototype.colidesWith = function (particle) { var distance = Math.sqrt(Math.pow(this.x - particle.x, 2) + Math.pow(this.y - particle.y, 2)); return distance <= (particle.r + this.r); }; var ParticleSystem = function () { this.particles = []; for (var i = 0; i < numParticles; i++) { this.particles.push(new Particle()); } }; ParticleSystem.prototype.draw = function () { for (var i = 0; i < this.particles.length; i++) { this.particles[i].draw(i); } }; var gui = new dat.GUI(); gui.add(window, 'numParticles').min(1).max(50).step(1).name('Num. Particles').onFinishChange(function(){ particleSystem = new ParticleSystem(); }); gui.add(window, 'maxParticleSpeed').min(1).max(20).step(1).onFinishChange(function(){ for (var i = 0; i < particleSystem.particles.length; i++) { particleSystem.particles[i].dx = maxParticleSpeed * Math.random() * (Math.random() > 0.5 ? 1 : -1); particleSystem.particles[i].dy = maxParticleSpeed * Math.random() * (Math.random() > 0.5 ? 1 : -1); } }); gui.add(window, 'numSat').min(1).max(10).step(1).name('Satellite number').onFinishChange(function(){ for (var i = 0; i < particleSystem.particles.length; i++) { particleSystem.particles[i].createSat(); } }); gui.add(window, 'maxSatOrbitSpeed').min(0.01).max(0.9).step(0.005).name('Max sat speed').onFinishChange(function(){ for (var i = 0; i < particleSystem.particles.length; i++) { particleSystem.particles[i].createSat(); } }); var particleSystem = new ParticleSystem(); window.onresize = function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; particleSystem = new ParticleSystem(); }; (function animloop(){ requestAnimFrame(animloop); ctx.clearRect(0, 0, canvas.width, canvas.height); particleSystem.draw(); var thisFrameFPS = 1000 / ((now=new Date()) - lastUpdate); fps += (thisFrameFPS - fps) / fpsFilter; lastUpdate = now; })(); setInterval(function(){ fpsOut.innerHTML = fps.toFixed(1) + " fps"; }, 1000);
粒子
时间
文字
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号