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);

    }).........完整代码请登录后点击上方下载按钮下载查看