canvas实现方块粒子拖影下落躲避鼠标交互动画效果代码-html代码-BFW代码库

canvas实现方块粒子拖影下落躲避鼠标交互动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现方块粒子拖影下落躲避鼠标交互动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
* { margin: 0; overflow: hidden; }
</style>

  
  
  
</head>

<body translate="no">
  
  
      <script  >
// classic avoid

const canvas = document.createElement('canvas');
const c = canvas.getContext('2d');

canvas.width = innerWidth * 2;
canvas.height = innerHeight * 2;
document.body.append(canvas);

canvas.style.width = innerWidth + 'px';
canvas.style.height = innerHeight + 'px';

const r = () => Math.random();

let mx = canvas.width / 2;
let my = canvas.height / 2;
onpointermove = e => {
  mx = e.clientX * 2;
  my = e.clientY * 2;
};

function dot() {
  let radius = 100 + Math.random() * 300;
  let size = 2 + r() * r() * 60;
  let halfSize = size / 2;
  let doubleSize = size * 2;

  let x = r() * (canvas.width + size) - halfSize;
  let y = r() * (canvas.height + size) - halfSize;
  let anchorX = x;
  let anchorY = y;

  let cx = 0;
  let cy = 0;

  let vy = 1 + r() * (size / 10);

  let mode = 0;

  return () => {

    anchorY += vy;
    if (anchorY > canvas.height +.........完整代码请登录后点击上方下载按钮下载查看