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>
相关推荐
Cwhat几秒前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死3 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6