canvas实现跟随鼠标五彩缤纷粒子光效动画效果代码-html代码-BFW代码库

canvas实现跟随鼠标五彩缤纷粒子光效动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现跟随鼠标五彩缤纷粒子光效动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
* {
  background-color: #000;
  color: #fff;
}

body {
  overflow: hidden;
}

#canvas {
	width: 100%;
	height: 100%;
  padding: 0;
	margin: 0;
	width: 100%;
	height: 100vh;
  /*
  position:absolute;
  left:0;
  top:0;
  background:transparent;
  z-index: 1;
  */
}
</style>


  
  
</head>

<body>
  <canvas id="canvas"></canvas>

  
      <script  >

/* --- System Parameters (Recommended)--- */
let bNum = 3; // Num of bubbles created on movement (3)
let bSize = 8; // Bubble size (8)
let bSpeed = 6; // Bubble speed (6)
let bDep = 0.1; // Bubble depletion speed (0.1)
let bDist = 30; // Spark length (30)
let bStarVar = 2; // Num of star variation (2)
let bHue = 4; // Color change speed (4) 
let cSize = 50;

/* --- Main Program: DO NOT EDIT BELOW --- */
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let spots = [];
let hue = 0;
let t = 0;

const mouse = {
  x: undefined,
  y: undefined };


canvas.addEventListener("mousemove", function (event) {
  mouse.x = event.x;
  mouse.y = event.y;
});

window.addEventListener("resize", function () {
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  init();
});

class Particle {
  constructor() {
    this.x = mouse.x + Math.cos(t / 10) * cSize;
    this.y = mouse.y + Math.sin(t / 10) * cSize;
    this.size = Math.random() * bSize + 0.1;
    this.speedX = Math.random() * bSpeed - bSpeed / 2;
    this.speedY = Math.random() * bSpeed - bSpeed / 2;
    this.points = Math.floor(Math.random() * bStarVar) + 30; //   
    this.radius = Math.random() * bSize + 0.1;
    this.color = "hsl(" + bHue * hue + ", 100%, 50%)";
    this.deg = .........完整代码请登录后点击上方下载按钮下载查看