html--瀑布

html 复制代码
<!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>
相关推荐
brzhang几秒前
代码越写越乱?掌握这 5 种架构模式,小白也能搭出清晰系统!
前端·后端·架构
J总裁的小芒果7 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星9 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
brzhang16 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears16 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
工呈士23 分钟前
CSS in JS:机遇与挑战的思考
javascript·css
至尊童25 分钟前
五个JavaScript 应用技巧
javascript
David凉宸28 分钟前
凉宸推荐给大家的一些开源项目
前端
举个栗子dhy29 分钟前
编辑器、代码块、大模型AI对话中代码复制功能实现
javascript
袋鱼不重30 分钟前
Cursor 最简易上手体验:谷歌浏览器插件开发3s搞定!
前端·后端·cursor