标签：canvas -- random height particles width 瀑布 html Math
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
html, body{
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</HEAD>
<BODY>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas'),
c = canvas.getContext("2d"),
particles = {},
particleIndex = 0,
particleNum = 50,
gravity = 0.7;
// full screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// particle
function Particle(){
this.posX = canvas.width / 2; // position X
this.posY = canvas.height / 8; // position Y
this.vx = Math.random() * 10 - 5; // velocity X
this.vy = Math.random() * 10 - 5 ; // velocity Y
this.width = 1; // particle width
this.height = Math.random() * 6 - 3; // particle height
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.life= 0;
this.death = 140;
//random color
this.colors = [
"rgba(100, 100, 100,"+ (Math.random() + .5) +")",
"rgba(52, 152, 200,"+ (Math.random() + .5) +")",
"rgba(41, 128, 250,"+ (Math.random() + .5) +")"];
this.color = this.colors[Math.floor(Math.random() * 3)];
}
// draw
Particle.prototype.draw = function(){
this.posX += this.vx;
this.posY += this.vy;
this.life++;
if(this.life >= this.death){
delete particles[this.id];
}
if(this.posY > (canvas.height - 5)){
this.vx *= 0.8;
this.vy *= -0.5;
this.posY = (canvas.height - 5);
}
this.vy += gravity;
c.fillStyle = this.color;
c.fillRect(this.posX,this.posY, this.width, this.height);
}
setInterval(function(){
c.fillStyle = "rgba(0,0,0,0.4)";
c.fillRect(0,0,canvas.width,canvas.height);
for(var i = 0; i < particleNum; i++){
new Particle();
}
for(var i in particles){
particles[i].draw();
}
}, 30);
</script>
</BODY>
</HTML>
标签：canvas,
--,
random,
height,
particles,
width,
瀑布,
html,
Math
From： https://blog.csdn.net/stqer/article/details/139265984