js实现一个canvas粒子旋转跟随鼠标效果代码-html代码-BFW代码库

js实现一个canvas粒子旋转跟随鼠标效果代码

代码语言：html

所属分类：粒子

代码描述：js实现一个canvas粒子旋转跟随鼠标效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">

  
  
<style>
html, body {
  height: 100%;
  width: 100%;
}
</style>


</head>

<body>
  <canvas height="327" width="882"></canvas>

  
      <script>
const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');

const mouse = {
  x: window.innerWidth / 2,
  y: window.innerHeight / 2 };


const colours = [
'#2185C5',
'#7ECEFD',
'#FFF6E5',
'#FF7F66'];


const limit = 50;

// Event listeners
window.addEventListener('mousemove', function (event) {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
});

window.addEventListener('resize', setCanvasDimensions);

window.addEventListener('click', function () {
  // explode?
});

// Utility functions
function setCanvasDimensions() {
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;
}

function randomIntFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomColour() {
  return colours[randomIntFromRange(0, colours.length)];
}

function Particle({ x, y, velocity, radius, colour } = {}) {
  this.x = x;
  this.y = y;
  this.velocity = velocity || 0.05;
  this.radius = radius;
  this.colour = randomColour();
  this.radians = Math.random() * Math.PI * 2;
  this.distan.........完整代码请登录后点击上方下载按钮下载查看