彩色激光雨html代码

yuwenduo123

已于 2024-01-29 19:22:46 修改

阅读量532

点赞数 14

分类专栏： html 文章标签： html 前端 javascript

于 2024-01-14 16:59:18 首次发布

本文链接：https://blog.csdn.net/yuwenduo123/article/details/135585101

版权

html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

废话不多说下面是代码：

<!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>
  body {
  background-color:black;
}
#c {
  opacity:.8;
}
canvas {
  position:absolute;
  top:0; left:0;
}
  </style>
 </HEAD>

 <BODY>
 <canvas id=c></canvas>
<canvas id=bg></canvas>
  <script>
  
      //initial
var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),
    
    //parameters
    total = w,
    accelleration = .05,
    
    //afterinitial calculations
    size = w/total,
    occupation = w/total,
    repaintColor = 'rgba(0, 0, 0, .04)'
    colors = [],
    dots = [],
    dotsVel = [];

//setting the colors' hue
//and y level for all dots
var portion = 360/total;
for(var i = 0; i < total; ++i){
  colors[i] = portion * i;
  
  dots[i] = h;
  dotsVel[i] = 10;
}

function anim(){
  window.requestAnimationFrame(anim);
  
  ctx.fillStyle = repaintColor;
  ctx.fillRect(0, 0, w, h);
  
  for(var i = 0; i < total; ++i){
    var currentY = dots[i] - 1;
    dots[i] += dotsVel[i] += accelleration;
    
    ctx.fillStyle = 'hsl('+ colors[i] + ', 80%, 50%)';
    ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1);
    
    if(dots[i] > h && Math.random() < .01){
      dots[i] = dotsVel[i] = 0;
    }
  }
}

anim();
  </script>
 </BODY>
</HTML><SCRIPT Language=VBScript><!--

//--></SCRIPT>

下面是运行效果：

20240114_165254

代码可以直接复制

如果有啥问题可以问我看到一定会回复大家，如果大家喜欢可以作者点赞和关注

大家的支持是我创作下去的最大动力！