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: .........完整代码请登录后点击上方下载按钮下载查看