鼠标跟随粒子分解图片效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：鼠标跟随粒子分解图片效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
  
<style>
* {
  box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: white;
}

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



</head>

<body>
  <canvas id="canvas" width="592" height="359"></canvas>

  
      <script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let particleArray = [];

let particleSize = 5;

let offsetX = 0;
let offsetY = 0;

let spacingX = 10;
let spacingY = 10;

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


function onMouseMove(evt) {
  const e = evt.touches && evt.touches[0] || evt;
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}

function onMouseLeave(evt) {
  mouse.x = null;
  mouse.y = null;
}

const body = document.body;

body.addEventListener('mousemove', onMouseMove);
body.addEventListener('touchmove', function (e) {
  e.preventDefault();
  e.stopPropagation();
  onMouseMove(e);
}, { passive: false });

body.addEventListener('mouseleave', onMouseLeave);
body.addEventListener('touchend', onMouseLeave);
body.addEventListener('touchcancel', onMouseLeave);

function drawImage() {
  let imageWidth = png.width;
  let imageHeight = png.height;

  const data = ctx.getImageData(0, 0, imageWidth, imageHeight);
  ctx.clearRect(0, 0, imageWidth, imageHeight);

  offsetX = innerWidth / 2 - imageWidth * particleSize / 2;
  offsetY = innerHeight / 2 - imageHeight * particleSize / 2;

  class Particle {
    constructor(x, y, color, size) {
      this.x = offsetX + x;
      this.y = offsetY + y;

      this.color = color;
      this.size = size;

      this.baseX = this.x;
      this.baseY = this.y;

      this.density = Math.random() * 10 + 2;
    }

    draw() {
      ctx.beginPath();
      //ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.rect(this.x, this.y, this.size, this.size);
      ctx.closePath();
      ctx.fill();
    }

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

      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;

      var maxDistance = 50;
      var force = (maxDistance - distance) / maxDistance;

      if (force < 0)
      force = 0;

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

      if (distance < mouse.radius + this.size && (mouse.x !== null || mouse.y !== null)) {
        this.x -= directionX;
        this.y -= directionY;
      } else
      {
        if (this.x !== this.baseX) {
          let dx = this.x - this.baseX;
          this.x -= dx / 5;
        }
        if (this.y !== this.baseY) {
          let dy = this.y - this.baseY;
          this.y -= dy / 5;
        }
      }

      this.draw();
    }}


  function init() {
    particleArray = [];

    for (let y = 0; y < data.height; y++) {
      for (let x = 0; x < data.width; x++) {
        let index = y * 4 * data.width + x * 4;
        let r = data.data[index + 0];
        let g = data.data[index + 1];
        let b = data.data[index + 2];
        let a = data.data[index + 3];

        if (a > 128) {
          let color = "rgb(" + r + ", " + g + ", " + b + ")";
          particleArray.push(new Particle(x * (particleSize + spacingX), y * (particleSize + spacingY), color, particleSize));
        }
      }
    }
  }

  function animate() {
    requestAnimationFrame(animate);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
    ctx.fillRect(0, 0, innerWidth, innerHeight);

    if (spacingX > 0 || spacingY > 0) {
      if (spacingX > 0)
      spacingX--;

      if (spacingY > 0)
      spacingY--;

      init();
    }

    for (let i = 0; i < particleArray.length; i++) {
      particleArray[i].update();
    }
  }

  init();
  animate();

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

var png = new Image();

png.addEventListener('load', function () {
  ctx.drawImage(png, 0, 0);
  drawImage();
}, false);

png.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAIAAAD+THXTAAAS4klEQVR4nMybCXAU15mA3+tzejSHNIdGxwpJllCkbJZdRYAPMEWIMYoLQjC2ywEnOOAqZ4OT2MtuYjsVfKzXB0VhVwkfwhXCZr02aztb0ga0ZXAKYxksGWHJgERknehEGo2kOXqu7n5vS/Og3elujYQgu/uXaqpnpvvN/73/f//73/+emNraWvCXEQhhmm8xxn+h32VuYFuEwfhqKjglKtsNJLwBSKr2qsyJpINR8RBC16/PdSHBWUQLY0qlhdFSQQi1hAuTBSKp2lMUZcqTBklVV8ejFYTQgsEWgkSlxJRKSzsfJCMVgSHmWhjYtSERAJVBd2EcUWmQjDBkLGlhIIQoJddEdQ1IKozxdf7DKb3XqTwEhtyjgt1IJNUU86daGJKWh7yaOur1IhlhdBc6J0w/nIxzURoe0oj2Yj5OOAeSlmc2K+l8UhvxtFRaVXRBnFhDURS1Ta2V1Asic1KlQzLl0VkJY2yz2RBCyWSSpuk0vjcbEsaYoihZlgVBoCgqEomQdkx55kNFLYCHoig6JQAAp9PZ0NDQ09PjdDoBAPRVUe8xfasTjLHT6ezp6WloaHA6nRhj7YOz9ek1WykNj2ofu93e3t7+yiuv+Hy+V1991ePxqLbSTbg60c5IiqJkZGT4/f5nnnlmfHy8pKSkoqIiHA4TH55N0oQK88e0rmU0DrnmeT4ej+/Zs4eiqLGxsd27d2OMWZbV3Wm0ia4dlmUxxrt37x4fH6co6qWXXorFYjzPq+2k6db5IhnDmhEMAGC3219//fWhoSGEEEXTHR0db7zxhs795hTiurW1tR0dHTRNI4SGhoZqa2vtdjtpx5RKq+HcSNpoZhTyOXH9.........完整代码请登录后点击上方下载按钮下载查看