鼠标跟随粒子分解图片效果代码-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, s.........完整代码请登录后点击上方下载按钮下载查看