图像悬浮粒子分解和合成效果-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 to repaint the canvas to its original background color
      this.baseX = Math.round(x + canvas.width / 2 - imageWidth / 2);
      this.baseY = Math.round(y + canvas.height / 2 - imageHeight / 2);
      this.previousX = null;
      this.previousY = null;
      this.density = Math.random() * 100 + 2;
    }

    stringifyColor() {
      return `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.color.a}`;
    }

    update() {
      ctx.fillStyle = this.stringifyColor();

      // collision detection
      let dx = mouse.x - this.x;
      let dy = mouse.y - this.y;
      let distance = Math.sqrt(dx * dx + dy * dy);
      let forceDirectionX = dx / distance;
      let forceDirectionY = dy / distance;

      // Max distance, past that the force will be 0
      const maxDistance = mouse.radius * 2.5;
      let force = (maxDistance - distance) / maxDistance;
      if (force < 0) force = 0;

      let directionX = forceDirectionX * force * this.density;
      let directionY = forceDirectionY * force * this.density;

      this.previousX = this.x;
      this.previousY = this.y;
      if (distance < mouse.radius + this.size) {
        this.x -= directionX;
        this.y -= directionY;
      } else {
        // Rounded to one decimal number to as x and y cannot be the same (whole decimal-less integer) 
        // as baseX and baseY by decreasing using a random number / 20
        if (Math.round(this.x) !== this.baseX) {
          let dx = this.x - this.baseX;
          this.x -= dx / 20;
        }
        if (Math.round(this.y) !== this.baseY) {
          let dy = this.y - this.baseY;
          this.y -= dy / 20;
        }
      }
    }}


  function c.........完整代码请登录后点击上方下载按钮下载查看