js彩色雨滴下雨动画效果代码-html代码-BFW代码库

js彩色雨滴下雨动画效果代码

代码语言：html

所属分类：粒子

代码描述：js彩色雨滴下雨动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  box-sizing: border-box;
}
body {
  background-color: black;
  transition: background-color 1000ms linear;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
footer {
  position: absolute;
  height: 50px;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: right;
  padding: 10px;
  color: grey;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
</style>




</head>

<body>
  <canvas id="main" width="834" height="518"></canvas>
<canvas id="middle" width="834" height="518"></canvas>
<canvas id="final" width="834" height="518"></canvas>
<footer>
  <span>
    <p>@weirdyang</p>
  </span>
</footer>

  
      <script >
// mouse
const mouse = {
  x: 0,
  y: 0,
  prevX: 0,
  prevY: 0,
  dead: false,
  right() {
    return this.x >= this.prevX;
  } };

const movements = ["touchstart", "mousemove", "touchmove"];
const leaves = ["touchend", "mouseleave", "mouseout"];
function updateMouse(x, y) {
  mouse.prevX = mouse.dead ? 0 : mouse.x;
  mouse.prevY = mouse.dead ? 0 : mouse.y;

  mouse.x = x;
  mouse.y = y;
}
function setUpEvent() {
  movements.forEach(move => {
    window.addEventListener(move, function (event) {
      event.preventDefault();
      const { x, y } = getMousePos(canvas, event, mouse);
      mouse.dead = false;
      updateMouse(x, y);
    });
  });
  leaves.forEach(move => {
    window.addEventListener(move, function (event) {
      event.preventDefault();
      updateMouse(0, 0);
      mouse.dead = true;
    });
  });
}

///https://levelup.gitconnected.com/using-prototype-vs-this-in-a-javascript-class-can-help-save-memory-816636418c3e
const colors = [
{
  canvas: document.getElementById("main"),
  context: document.getElementById("main").getContext("2d"),
  drops: [],
  color: "#00FFFC",
  speed: 1.5,
  radius: 1 },

{
  canvas: document.getElementById("middle"),
  context: document.getElementById("middle").getContext("2d"),
  drops: [],
  color: "#FC00FF",
  speed: 2,
  radius: 2 },

{
  canvas: document.getElementById("final"),
  context: document.getElementById("final").getContext("2d"),
  drops: [],
  color: "#fffc00",
  speed: 2.5,
  radius: 3 }];



const triadic = ["#00FFFC", "#FC00FF", "#fffc00"];

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
}
const canvas = document.getElementById("main");
const middle = document.getElementById("middle");
const final = document.getElementById("final");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
middle.width = window.innerWidth;
middle.height = window.innerHeight;
final.width = window.innerWidth;
final.height = window.innerHeight;

class Drop {
  constructor(color, yVelocity, radius, current) {
    this.xPos = Math.random() * (window.innerWidth - 20);
    this.yPos = Math.random() * 20;
    this.fallSpeed = Math.random() * 0.5 + 0.5 + yVelocity;
    this.radius = radius;
    thi.........完整代码请登录后点击上方下载按钮下载查看