• 前端练习小项目 —— 养一只电子蜘蛛

            前言：在学习完JavaScript之后，我们就可以使用JavaScript来实现一下好玩的效果了，本篇文章讲解的是如何纯使用JavaScript来实现一个网页中的电子蜘蛛。

    ✨✨✨这里是秋刀鱼不做梦的BLOG

    ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

    在开始学习如何编写一个网页蜘蛛之前，先让我们看一下这个电子蜘蛛长什么样：

            ——我们可以看到，其会跟随着我们的鼠标进行移动，那么我们如何实现这样的效果呢？接下来让我们开始讲解。

    1.HTML代码

            我们的html代码十分的简单，就是创建一个画布，而我们接下来的操作，都是在此上边进行操作的：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>秋刀鱼不做梦title>
    9.     
    10.     <script src="./test.js">script>
    11.     <style>
    12.         /* 移除body的默认外边距和内边距 */
    13.         body {
    14.             margin: 0px;
    15.             padding: 0px;
    16.             position: fixed;
    17.             /* 设置网页背景颜色为黑色 */
    18.             background: rgb(0, 0, 0);
    19.         }
    20.     style>
    21. head>
    22.  
    23. <body>
    24.     
    25.     <canvas id="canvas">canvas>
    26. body>
    27.  
    28. html>

            可以看到我们的HTML代码非常的简单，接下来让我们开始在其上边进行操作！

    2.JavaScript代码

            在开始编写JavaScript代码之前，先让我们理清一下思路：

    总体流程

    1. 页面加载时，canvas 元素和绘图上下文初始化。

    2. 定义触手对象，每条触手由多个段组成。

    3. 监听鼠标移动事件，实时更新鼠标的位置。

    4. 通过动画循环绘制触手，触手根据鼠标的位置动态变化，形成流畅的动画效果。

            大致的流程就是上边的步骤，但是我相信读者在没用自己完成此代码的编写之前，可能不能理解上边的流程，不过没关系，现在让我们开始我们的网页小蜘蛛的编写：

           

            写在前面：为了让读者可以更好的理解代码的逻辑，我们给没一句代码都加上了注释，希望读者可以根据注释的帮助一点一点的理解代码：

    JavaScript代码：

    1. // 定义requestAnimFrame函数
    2. window.requestAnimFrame = function () {
    3.     // 检查浏览器是否支持requestAnimFrame函数
    4.     return (
    5.         window.requestAnimationFrame ||
    6.         window.webkitRequestAnimationFrame ||
    7.         window.mozRequestAnimationFrame ||
    8.         window.oRequestAnimationFrame ||
    9.         window.msRequestAnimationFrame ||
    10.         // 如果所有这些选项都不可用，使用设置超时来调用回调函数
    11.         function (callback) {
    12.             window.setTimeout(callback)
    13.         }
    14.     )
    15. }
    16.  
    17. // 初始化函数，用于获取canvas元素并返回相关信息
    18. function init(elemid) {
    19.     // 获取canvas元素
    20.     let canvas = document.getElementById(elemid)
    21.     // 获取2d绘图上下文,这里d是小写的
    22.     c = canvas.getContext('2d')
    23.     // 设置canvas的宽度为窗口内宽度，高度为窗口内高度
    24.     w = (canvas.width = window.innerWidth)
    25.     h = (canvas.height = window.innerHeight)
    26.     // 设置填充样式为半透明黑
    27.     c.fillStyle = "rgba(30,30,30,1)"
    28.     // 使用填充样式填充整个canvas
    29.     c.fillRect(0, 0, w, h)
    30.     // 返回绘图上下文和canvas元素
    31.     return { c: c, canvas: canvas }
    32. }
    33.  
    34. // 等待页面加载完成后执行函数
    35. window.onload = function () {
    36.     // 获取绘图上下文和canvas元素
    37.     let c = init("canvas").c,
    38.         canvas = init("canvas").canvas,
    39.         // 设置canvas的宽度为窗口内宽度，高度为窗口内高度
    40.         w = (canvas.width = window.innerWidth),
    41.         h = (canvas.height = window.innerHeight),
    42.         // 初始化鼠标对象
    43.         mouse = { x: false, y: false },
    44.         last_mouse = {}
    45.  
    46.     // 定义计算两点距离的函数
    47.     function dist(p1x, p1y, p2x, p2y) {
    48.         return Math.sqrt(Math.pow(p2x - p1x, 2) + Math.pow(p2y - p1y, 2))
    49.     }
    50.  
    51.     // 定义 segment 类
    52.     class segment {
    53.         // 构造函数，用于初始化 segment 对象
    54.         constructor(parent, l, a, first) {
    55.             // 如果是第一条触手段，则位置坐标为触手顶部位置
    56.             // 否则位置坐标为上一个segment对象的nextPos坐标
    57.             this.first = first
    58.             if (first) {
    59.                 this.pos = {
    60.                     x: parent.x,
    61.                     y: parent.y,
    62.                 }
    63.             } else {
    64.                 this.pos = {
    65.                     x: parent.nextPos.x,
    66.                     y: parent.nextPos.y,
    67.                 }
    68.             }
    69.             // 设置segment的长度和角度
    70.             this.l = l
    71.             this.ang = a
    72.             // 计算下一个segment的坐标位置
    73.             this.nextPos = {
    74.                 x: this.pos.x + this.l * Math.cos(this.ang),
    75.                 y: this.pos.y + this.l * Math.sin(this.ang),
    76.             }
    77.         }
    78.         // 更新segment位置的方法
    79.         update(t) {
    80.             // 计算segment与目标点的角度
    81.             this.ang = Math.atan2(t.y - this.pos.y, t.x - this.pos.x)
    82.             // 根据目标点和角度更新位置坐标
    83.             this.pos.x = t.x + this.l * Math.cos(this.ang - Math.PI)
    84.             this.pos.y = t.y + this.l * Math.sin(this.ang - Math.PI)
    85.             // 根据新的位置坐标更新nextPos坐标
    86.             this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang)
    87.             this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang)
    88.         }
    89.         // 将 segment 回执回初始位置的方法
    90.         fallback(t) {
    91.             // 将位置坐标设置为目标点坐标
    92.             this.pos.x = t.x
    93.             this.pos.y = t.y
    94.             this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang)
    95.             this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang)
    96.         }
    97.         show() {
    98.             c.lineTo(this.nextPos.x, this.nextPos.y)
    99.         }
    100.     }
    101.  
    102.     // 定义 tentacle 类
    103.     class tentacle {
    104.         // 构造函数，用于初始化 tentacle 对象
    105.         constructor(x, y, l, n, a) {
    106.             // 设置触手的顶部位置坐标
    107.             this.x = x
    108.             this.y = y
    109.             // 设置触手的长度
    110.             this.l = l
    111.             // 设置触手的段数
    112.             this.n = n
    113.             // 初始化触手的目标点对象
    114.             this.t = {}
    115.             // 设置触手的随机移动参数
    116.             this.rand = Math.random()
    117.             // 创建触手的第一条段
    118.             this.segments = [new segment(this, this.l / this.n, 0, true)]
    119.             // 创建其他的段
    120.             for (let i = 1; i < this.n; i++) {
    121.                 this.segments.push(
    122.                     new segment(this.segments[i - 1], this.l / this.n, 0, false)
    123.                 )
    124.             }
    125.         }
    126.         // 移动触手到目标点的方法
    127.         move(last_target, target) {
    128.             // 计算触手顶部与目标点的角度
    129.             this.angle = Math.atan2(target.y - this.y, target.x - this.x)
    130.             // 计算触手的距离参数
    131.             this.dt = dist(last_target.x, last_target.y, target.x, target.y)
    132.             // 计算触手的目标点坐标
    133.             this.t = {
    134.                 x: target.x - 0.8 * this.dt * Math.cos(this.angle),
    135.                 y: target.y - 0.8 * this.dt * Math.sin(this.angle)
    136.             }
    137.             // 如果计算出了目标点，则更新最后一个segment对象的位置坐标
    138.             // 否则，更新最后一个segment对象的位置坐标为目标点坐标
    139.             if (this.t.x) {
    140.                 this.segments[this.n - 1].update(this.t)
    141.             } else {
    142.                 this.segments[this.n - 1].update(target)
    143.             }
    144.             // 遍历所有segment对象，更新它们的位置坐标
    145.             for (let i = this.n - 2; i >= 0; i--) {
    146.                 this.segments[i].update(this.segments[i + 1].pos)
    147.             }
    148.             if (
    149.                 dist(this.x, this.y, target.x, target.y) <=
    150.                 this.l + dist(last_target.x, last_target.y, target.x, target.y)
    151.             ) {
    152.                 this.segments[0].fallback({ x: this.x, y: this.y })
    153.                 for (let i = 1; i < this.n; i++) {
    154.                     this.segments[i].fallback(this.segments[i - 1].nextPos)
    155.                 }
    156.             }
    157.         }
    158.         show(target) {
    159.             // 如果触手与目标点的距离小于触手的长度，则回执触手
    160.             if (dist(this.x, this.y, target.x, target.y) <= this.l) {
    161.                 // 设置全局合成操作为lighter
    162.                 c.globalCompositeOperation = "lighter"
    163.                 // 开始新路径
    164.                 c.beginPath()
    165.                 // 从触手起始位置开始绘制线条
    166.                 c.moveTo(this.x, this.y)
    167.                 // 遍历所有的segment对象，并使用他们的show方法回执线条
    168.                 for (let i = 0; i < this.n; i++) {
    169.                     this.segments[i].show()
    170.                 }
    171.                 // 设置线条样式
    172.                 c.strokeStyle = "hsl(" + (this.rand * 60 + 180) +
    173.                     ",100%," + (this.rand * 60 + 25) + "%)"
    174.                 // 设置线条宽度
    175.                 c.lineWidth = this.rand * 2
    176.                 // 设置线条端点样式
    177.                 c.lineCap = "round"
    178.                 // 设置线条连接处样式
    179.                 c.lineJoin = "round"
    180.                 // 绘制线条
    181.                 c.stroke()
    182.                 // 设置全局合成操作为“source-over”
    183.                 c.globalCompositeOperation = "source-over"
    184.             }
    185.         }
    186.         // 绘制触手的圆形头的方法
    187.         show2(target) {
    188.             // 开始新路径
    189.             c.beginPath()
    190.             // 如果触手与目标点的距离小于触手的长度，则回执白色的圆形
    191.             // 否则绘制青色的圆形
    192.             if (dist(this.x, this.y, target.x, target.y) <= this.l) {
    193.                 c.arc(this.x, this.y, 2 * this.rand + 1, 0, 2 * Math.PI)
    194.                 c.fillStyle = "whith"
    195.             } else {
    196.                 c.arc(this.x, this.y, this.rand * 2, 0, 2 * Math.PI)
    197.                 c.fillStyle = "darkcyan"
    198.             }
    199.             // 填充圆形
    200.             c.fill()
    201.         }
    202.     }
    203.     // 初始化变量
    204.     let maxl = 400,//触手的最大长度
    205.         minl = 50,//触手的最小长度
    206.         n = 30,//触手的段数
    207.         numt = 600,//触手的数量
    208.         tent = [],//触手的数组
    209.         clicked = false,//鼠标是否被按下
    210.         target = { x: 0, y: 0 }, //触手的目标点
    211.         last_target = {},//上一个触手的目标点
    212.         t = 0,//当前时间
    213.         q = 10;//触手每次移动的步长
    214.  
    215.     // 创建触手对象
    216.     for (let i = 0; i < numt; i++) {
    217.         tent.push(
    218.             new tentacle(
    219.                 Math.random() * w,//触手的横坐标
    220.                 Math.random() * h,//触手的纵坐标
    221.                 Math.random() * (maxl - minl) + minl,//触手的长度
    222.                 n,//触手的段数
    223.                 Math.random() * 2 * Math.PI,//触手的角度
    224.             )
    225.         )
    226.     }
    227.     // 绘制图像的方法
    228.     function draw() {
    229.         // 如果鼠标移动，则计算触手的目标点与当前点的偏差
    230.         if (mouse.x) {
    231.             target.errx = mouse.x - target.x
    232.             target.erry = mouse.y - target.y
    233.         } else {
    234.             // 否则，计算触手的目标点的横坐标
    235.             target.errx =
    236.                 w / 2 +
    237.                 ((h / 2 - q) * Math.sqrt(2) * Math.cos(t)) /
    238.                 (Math.pow(Math.sin(t), 2) + 1) -
    239.                 target.x;
    240.             target.erry =
    241.                 h / 2 +
    242.                 ((h / 2 - q) * Math.sqrt(2) * Math.cos(t) * Math.sin(t)) /
    243.                 (Math.pow(Math.sin(t), 2) + 1) -
    244.                 target.y;
    245.         }
    246.  
    247.         // 更新触手的目标点坐标
    248.         target.x += target.errx / 10
    249.         target.y += target.erry / 10
    250.  
    251.         // 更新时间
    252.         t += 0.01;
    253.  
    254.         // 绘制触手的目标点
    255.         c.beginPath();
    256.         c.arc(
    257.             target.x,
    258.             target.y,
    259.             dist(last_target.x, last_target.y, target.x, target.y) + 5,
    260.             0,
    261.             2 * Math.PI
    262.         );
    263.         c.fillStyle = "hsl(210,100%,80%)"
    264.         c.fill();
    265.  
    266.         // 绘制所有触手的中心点
    267.         for (i = 0; i < numt; i++) {
    268.             tent[i].move(last_target, target)
    269.             tent[i].show2(target)
    270.         }
    271.         // 绘制所有触手
    272.         for (i = 0; i < numt; i++) {
    273.             tent[i].show(target)
    274.         }
    275.         // 更新上一个触手的目标点坐标
    276.         last_target.x = target.x
    277.         last_target.y = target.y
    278.     }
    279.     // 循环执行绘制动画的函数
    280.     function loop() {
    281.         // 使用requestAnimFrame函数循环执行
    282.         window.requestAnimFrame(loop)
    283.  
    284.         // 清空canvas
    285.         c.clearRect(0, 0, w, h)
    286.  
    287.         // 绘制动画
    288.         draw()
    289.     }
    290.  
    291.     // 监听窗口大小改变事件
    292.     window.addEventListener("resize", function () {
    293.         // 重置canvas的大小
    294.         w = canvas.width = window.innerWidth
    295.         w = canvas.height = window.innerHeight
    296.  
    297.         // 循环执行回执动画的函数
    298.         loop()
    299.     })
    300.  
    301.     // 循环执行回执动画的函数
    302.     loop()
    303.     // 使用setInterval函数循环
    304.     setInterval(loop, 1000 / 60)
    305.  
    306.     // 监听鼠标移动事件
    307.     canvas.addEventListener("mousemove", function (e) {
    308.         // 记录上一次的鼠标位置
    309.         last_mouse.x = mouse.x
    310.         last_mouse.y = mouse.y
    311.  
    312.         // 更新点前的鼠标位置
    313.         mouse.x = e.pageX - this.offsetLeft
    314.         mouse.y = e.pageY - this.offsetTop
    315.     }, false)
    316.  
    317.     // 监听鼠标离开事件
    318.     canvas.addEventListener("mouseleave", function (e) {
    319.         // 将mouse设为false
    320.         mouse.x = false
    321.         mouse.y = false
    322.     })
    323. }

    这里我们在大致的梳理一下上述代码的流程：

    1. 初始化阶段

    • init 函数：当页面加载时，init 函数被调用，获取 canvas 元素并设置其宽高为窗口的大小。获取到的 2D 绘图上下文（context）用于后续绘制。
    • window.onload：页面加载完成后，初始化 canvas 和 context，并设置鼠标初始状态。

    2. 触手对象的定义

    • segment 类：这是触手的一段，每个段有起始点（pos）、长度（l）、角度（ang），并通过角度计算出下一段的位置（nextPos）。
    • tentacle 类：代表完整的触手，由若干个 segment 组成。触手的起始点在屏幕中心，并且每个触手包含多个段。tentacle 的主要方法有：
      • move：根据鼠标位置更新每一段的位置。
      • show：绘制触手的路径。

    3. 事件监听

    • canvas.addEventListener("mousemove", ...)：当鼠标移动时，捕捉鼠标的位置并存储在 mouse 变量中。每次鼠标移动会更新 mouse 和 last_mouse 的坐标，用于后续的动画。

    4. 动画循环

    • draw 函数：这是一个递归的函数，用于创建动画效果。
      • 首先，它会在每一帧中为画布填充半透明背景，使得之前绘制的内容逐渐消失，产生拖影效果。
      • 然后，遍历所有触手（tentacles），调用它们的 move 和 show 方法，更新位置并绘制每一帧。
      • 最后，使用 requestAnimFrame(draw) 不断递归调用 draw，形成一个动画循环。

    5. 触手的行为

    • 触手的运动是通过 move 函数实现的，触手的最后一个段首先更新位置，然后其他段依次跟随。
    • 触手的绘制通过 show 函数，遍历所有段并绘制线条，最后显示在屏幕上。

            ——这样我们就完成了电子小蜘蛛的制作了！！！

    最后，在让我们看一下最终效果：

    以上就是本篇文章的全部内容了！！

  • 相关阅读:
    “升职加薪”必经路，深入详解Spring，读懂源码So easy
    笔试强训Day12
    初识结构体
    提高网申通过率的秘籍，校园招聘之春招秋招都有效
    指针进阶（一）
    c盘文件误删怎么恢复？这里介绍四种方法，赶紧看过来
    JFrame中有关于DefaultCloseOperation的使用及参数说明（含源码阅读）
    SSM毕设项目超市零售管理系统mq344（java+VUE+Mybatis+Maven+Mysql）
    吃鸡游戏出现msvcp140.dll缺失的四个解决方法
    B+tree - B+树深度解析+C语言实现+opencv绘图助解
  • 原文地址：https://blog.csdn.net/2302_80198073/article/details/142066354