canvas实现鼠标跟随蜘蛛爬行发光交互效果代码-html代码-BFW代码库

canvas实现鼠标跟随蜘蛛爬行发光交互效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现鼠标跟随蜘蛛爬行发光交互效果代码

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

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

<head>

  <meta charset="UTF-8">

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



</head>

<body>
  <canvas id="canvas"><canvas>

  
      <script>
let w, h;
const ctx = canvas.getContext("2d");
const { sin, cos, PI, hypot, min, max } = Math;



function spawn() {

  const pts = many(333, () => {
    return {
      x: rnd(innerWidth),
      y: rnd(innerHeight),
      len: 0,
      r: 0 };

  });

  const pts2 = many(9, i => {
    return {
      x: cos(i / 9 * PI * 2),
      y: sin(i / 9 * PI * 2) };

  });

  let seed = rnd(100);
  let tx = rnd(innerWidth);
  let ty = rnd(innerHeight);
  let x = rnd(innerWidth);
  let y = rnd(innerHeight);
  let kx = rnd(0.5, 0.5);
  let ky = rnd(0.5, 0.5);
  let walkRadius = pt(rnd(50, 50), rnd(50, 50));
  let r = innerWidth / rnd(100, 150);

  function paintPt(pt) {
    pts2.forEach(pt2 => {
      if (!pt.len)
      return;
      drawLine(
      lerp(x + pt2.x * r, pt.x, pt.len * pt.len),
      lerp(y + pt2.y * r, pt.y, pt.len * pt.len),
      x + pt2.x * r,
      y + pt2.y * r);

    });
    drawCircle(pt.x, pt.y, pt.r);
  }

  return {
    follow(x, y) {
      tx = x;
      ty = y;
    },

    tick(t) {

      const selfMoveX = cos(t * kx + seed) * walkRadius.x;
      const selfMoveY = sin(t * ky + seed) * walkRadius.y;
      let fx = tx + selfMoveX;
      let fy = ty + selfMoveY;

      x += min(innerWidth / 100, (fx - x) / 10);
      y += min(innerWidth / 100, (fy - y) / 10);

      let i = 0;
      pts.forEach(pt => {
        const dx = pt.x - x,
        dy = pt.y - y;
        const len = hypot(dx, dy);
        let r = min(2, innerWidth / len / 5);
        pt.t = 0;
        c.........完整代码请登录后点击上方下载按钮下载查看