图像悬浮粒子分解和合成效果-html代码-BFW代码库

图像悬浮粒子分解和合成效果

代码语言：html

所属分类：粒子

代码描述：图像悬浮粒子分解和合成效果，把鼠标放上去，然后移动，就可以看到图片分离成微小的粒子，然后慢慢的合成原图

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  cursor: none;
  overflow: hidden;
}

#cursor {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border: 1px solid #01321f33;
  border-radius: 50%;
  box-shadow:0 0 10px #01321f;
  opacity: 0;
  transition: opacity .5s ease;
}

#canvas1 {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

</head>
<body translate="no">


<div id="cursor"></div>
<canvas id="canvas1"></canvas>

<script >
const canvas = document.querySelector('#canvas1');
const cursor = document.querySelector('#cursor');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let canvasWidth = canvas.width;
let canvasHeight = canvas.height;
let particleArray = [];
let imageData = [];
let raqID = null; // Cancel current requestAnimationFrame upon resize

// mouse
let mouse = {
  x: null,
  y: null,
  radius: 40 };


// Devices with mouse
window.addEventListener('mousemove', e => {
  cursor.style.opacity = 1;
  mouse.x = e.x;
  mouse.y = e.y;
  cursor.style.transform = `translate(${e.x}px, ${e.y}px)`;
});

window.addEventListener('mouseup', e => {
  cursor.style.opacity = 0;
  mouse.x = null;
  mouse.y = null;
});

// For touch devices
document.body.addEventListener('mouseleave', e => {
  cursor.style.opacity = 0;
  mouse.x = null;
  mouse.y = null;
});

window.addEventListener('touchstart', e => {
  mouse.x = e.touches[0].clientX;
  mouse.y = e.touches[0].clientY;
});

window.addEventListener('touchmove', e => {
  mouse.x = e.changedTouches[0].clientX;
  mouse.y = e.changedTouches[0].clientY;
});

window.addEventListener('touchend', e => {
  cursor.style.opacity = 0;
  mouse.x = null;
  mouse.y = null;
});

// Draw image on canvas and run animation
function drawImage(width, height) {
  let imageWidth = width;
  let imageHeight = height;
  const data = ctx.getImageData(0, 0, imageWidth, imageHeight);

  class Particle {
    constructor(x, y, color, size = 2) {
      this.x = Math.round(x + canvas.width / 2 - imageWidth / 2);
      this.y = Math.round(y + canvas.height / 2 - imageHeight / 2);
      this.color = color;
      this.size = size;

      // Records base and previous positions t.........完整代码请登录后点击上方下载按钮下载查看