canvas鼠标悬浮粒子躲避动画效果代码-html代码-BFW代码库

canvas鼠标悬浮粒子躲避动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas鼠标悬浮粒子躲避动画动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    html,body {
	overflow:hidden;
	margin:0;
	background-color:#000;
}
.instructions {
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:#fff;
	letter-spacing:2px;
	pointer-events:none;
}
canvas {
	width:100%;
}

</style>
</head>

<body>
<canvas></canvas>
    <div class="instructions">移动鼠标推动粒子</div>

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

const RESOLUTION = 1;

let w = canvas.width = window.innerWidth * RESOLUTION;
let h = canvas.height = window.innerHeight * RESOLUTION;

const PARTICLE_COUNT = 400;
const CONNECT_DISTANCE = w * 0.05;
const FORCE_DISTANCE = w * 0.1;

const r = (n = 1) => Math.random() * n;
const PI = Math.PI;
const TAU = PI * 2;

let time = new Date();

const lerp = (start, end, amt) => {
  return (1 - amt) * start + amt * end;
};

const distance = (x1, y1, x2, y2) => {
  const a = x1 - x2;
  const b = y1 - y2;
  return Math.sqrt(a * a + b * b);
};

const angle = (cx, cy, ex, ey) => {
  return Math.atan2(ey - cy, ex - cx);
};

const particlePrototype = () => ({
  x: w * 0.5 + Math.cos(r(TAU)) * r(w * 0.5),
  y: h * 0.5 + Math.sin(r(TAU)) * r(h * 0.5),
  angle: r(TAU),
  speed: r(0.15),
  normalSpeed: r(0.15),
  oscAmplitudeX: r(2),
  oscSpeedX: 0.001 + r(0.008),
  oscAmplitudeY: r(2),
  oscSpeedY: 0.001 + r(0.008),
  connectDistance: r(CONNECT_DISTANCE),
  color: {
    r: Math.round(200 + r(55)),
    g: Math.round(150 + r(105)),
    b: Math.round(200 + r(55)) } });



const particles = new Array(PARTICLE_COUNT).
fill({}).
map(particlePrototype);

const update = () => {
  particles.forEach(p1 => {
    p1.x += (Math.cos(p1.angle) + Math.cos(time * p1.oscSpeedX) * p1.oscAmplitudeX) * p1.speed;
    p1.y += (Math.sin(p1.angle) + Math.cos(time * p1.oscSpeedY) * p1.oscAmplitudeY) * p1.speed;

    p1.speed = lerp(p1.speed, p1.normalSpeed * RESOLUTION, 0.1);

    if (p1.x > w || p1.x < 0) {
      p1.angle = PI - p1.angle;
    }
    if (p1.y > h || p1.y < 0) {
      p1.angle = -.........完整代码请登录后点击上方下载按钮下载查看