console
var maxParticles = 2000,
particleSize = 3,
emissionRate = 1,
startTime,
particles = [],
currentTime,
ballFriction = 0.99,
collisionDamper = 0.1,
lastPos,
objectSize = 3;
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var midX = canvas.width / 2;
var midY = canvas.height / 2;
function particle() {
this.position = { x: 40 + (Math.random() * (canvas.width - 40)), y: -(Math.random() * 50), z: (Math.random() * 10) };
this.velocity = { x: 0, y: 0 };
this.radius = particleSize;
this.mass = particleSize;
this.alpha = 1;
this.length = 10;
this.lineWidth = (1 - ((this.position.z / 12)));
this.acceleration = { x: 0, y: (1 - ((this.position.z/7))) };
}
function newParticle() {
var curPart = new particle();
particles.push(curPart);
}
function drawParticles() {
for (var i = 0; i < particles.length; i++) {
var position = particles[i].position;
ctx.fillStyle = 'rgb(255,255,255)';
ctx.strokeStyle = 'rgba(255,255,255,' + particles[i].alpha + ')';
ctx.lineWidth = particles[i].lineWidth;
ctx.beginPath();
ctx.moveTo(position.x, position.y);
ctx.lineTo(position.x, position.y + particles[i].length);
ctx.stroke();
}
}
function updateParticles() {
for (var i = 0; i < particles.length; i++) {
particles[i].velocity.x = particles[i].velocity.x + particles[i].acceleration.x;
particles[i].velocity.y = particles[i].velocity.y + particles[i].acceleration.y;
particles[i].position.x = particles[i].position.x + particles[i].velocity.x;
particles[i].position.y = particles[i].position.y + particles[i].velocity.y;
checkNextBoundaries(i, particles[i].position.y);
if(particles[i]){
particles[i].length = particles[i].velocity.y * 1.8;
var nextVy = particles[i].velocity.y + particles[i].acceleration.y;
var nextPy = particles[i].position.y + particles[i].velocity.y;
checkNextBoundaries(i, nextPy);
}
}
}
function checkNextBoundaries(i, nextPy) {
if (nextPy >= ((canvas.height*0.9 - ((particles[i].position.z)*55)) -particles[i].radius)) {
particles[i].velocity.y *= -1;
particles[i].velocity.y *= collisionDamper;
particles[i].length = 3;
if (particles[i].velocity.y >= -0.2 && particles[i].velocity.y <= 0.2) {
particles[i].acceleration.y = 0;
particles[i].velocity.y = 0;
particles.splice(i, 1);
}
}
if (particles[i] && particles[i].position && particles[i].position.x >= (canvas.width - particles[i].radius)) {
particles[i].velocity.x *= -1;
particles[i].velocity.x *= collisionDamper;
}
if (particles[i] && particles[i].position && particles[i].position.x <= (particles[i].radius)) {
particles[i].velocity.x *= -1;
particles[i].velocity.x *= collisionDamper;
}
}
function checkCollision(i) {
for (var ii = 0; ii < particles.length; ii++) {
if (ii != i) {
var result = circleCollision(particles[i], particles[ii]);
if(result){
var newVelX1 = (particles[i].velocity.x * (particles[i].mass - particles[ii].mass) + (2 * particles[ii].mass * particles[ii].velocity.x)) / (particles[i].mass + particles[ii].mass);
var newVelY1 = (particles[i].velocity.y * (particles[i].mass - particles[ii].mass) + (2 * particles[ii].mass * particles[ii].velocity.y)) / (particles[i].mass + particles[ii].mass);
var newVelX2 = (particles[ii].velocity.x * (particles[ii].mass - particles[i].mass) + (2 * particles[i].mass * particles[i].velocity.x)) / (particles[i].mass + particles[ii].mass);
var newVelY2 = (particles[ii].velocity.y * (particles[ii].mass - particles[i].mass) + (2 * particles[i].mass * particles[i].velocity.y)) / (particles[i].mass + particles[ii].mass);
particles[i].velocity.x = newVelX1 * ballFriction;
particles[i].velocity.y = newVelY1 * ballFriction;
particles[ii].velocity.x = newVelX2 * ballFriction;
particles[ii].velocity.y = newVelY2 * ballFriction;
}
}
}
}
function circleCollision(c1, c2) {
var dx = c1.position.x - c2.position.x;
var dy = c1.position.y - c2.position.y;
var dist = c1.radius + c2.radius;
var result = (dx * dx + dy * dy <= dist * dist)
return result;
}
function loop() {
currentTime = (new Date()).getTime();
clear();
update();
draw();
queue();
}
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function update() {
if(particles.length < maxParticles){
newParticle();
newParticle();
newParticle();
}
updateParticles();
}
function draw() {
drawParticles();
}
function queue() {
window.requestAnimationFrame(loop);
}
window.onload = function(){
setTimeout(function () {
startTime = (new Date()).getTime();
loop();
}, 100);
}
<canvas id="canvas" width="800" height="500"></canvas><div class="dropdown">
<li><a href="#"><button class="dropbtn">首页</button></a></li>
<div class="dropdown-content">
<a href="http://www.hezhiming.cn/#jcxs">畅销书</a>
<a href="http://www.hezhiming.cn/#jcxs">促销书</a>
<a href="http://www.hezhiming.cn/#jcxs">热门书</a>
</div>
</div>
<div class="dropdown">
<li><a href="#"><button class="dropbtn">调查</button></a></li>
<div class="dropdown-content">
<a href="https://wenku.baidu.com/view/4fea24cada38376baf1fae94.html?from=search">好评</a>
<a href="https://wenku.baidu.com/view/101d3e45a26925c52cc5bfde.html?from=search">留言</a>
<a href="https://wenku.baidu.com/view/c7ba02896529647d272852b0.html?from=search">建议</a>
</div>
</div>
<div class="dropdown">
<li><a href="#"><button class="dropbtn">分析</button></a></li>
<div class="dropdown-content">
<a href="http://www.runoob.com">客户分析</a>
<a href="http://www.runoob.com">市场分析</a>
<a href="http://www.runoob.com">内部分析</a>
</div>
</div>
<div class="dropdown">
<li><a href="#"><button class="dropbtn">下单</button></a></li>
<div class="dropdown-content">
<a href="http://www.runoob.com">菜鸟教程 1</a>
<a href="http://www.runoob.com">菜鸟教程 2</a>
<a href="http://www.runoob.com">菜鸟教程 3</a>
body, html {
margin: 0;
padding: 0;
background-color: black;
}
canvas {
background-color: black;
}.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}body, html {
margin: 0;
padding: 0;
background-color: black;
}