canvas小蜘蛛

一. 效果

在这里插入图片描述

二. 代码

<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-10-24 14:23:22
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-10-24 15:59:35
 * @FilePath: \undefinedc:\work\other\HTML\蜘蛛.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Document</title> -->
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
        }

        #div {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #canvas {
            width: 100%;
            height: 100%;
            background-color: black;
        }
    </style>
</head>

<body>
    <div id="div">
        <canvas id="canvas"></canvas>
    </div>

    <script>
        let sbX = null;
        let sbY = null;
        var canvas = document.getElementById("canvas");
        var div = document.getElementById("div");
        var ctx = canvas.getContext("2d");
        let appWidth = div.offsetWidth;
        let appHeight = div.offsetHeight;
        canvas.width = appWidth;
        canvas.height = appHeight;
        // 点位数组
        let pointList = []

        function Point(x, y, color) {
            this.x = x;
            this.y = y;
            this.color = color;
            this.moveX = Math.random() - 0.5;
            this.moveY = Math.random() - 0.5;
        }
        Point.prototype.Move = function () {
            // 点移动
            this.x += this.moveX
            this.y += this.moveY

            // 点移动边界
            if (this.x > appWidth || this.x < 0) {
                this.moveX = -this.moveX;
            }
            if (this.y > appHeight || this.y < 0) {
                this.moveY = -this.moveY;
            }
        }
        // 连线点
        Point.prototype.line = function (point) {
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(point.x, point.y);
            ctx.strokeStyle = '#918b8b';
            ctx.stroke();
        }

        Point.prototype.draw = function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, 1, 0, 10);
            ctx.fillStyle = this.color;
            ctx.fill();
        }

        Point.prototype.update = function () {
            this.Move();
            this.draw();
        }

        // 鼠标移动
        div.onmousemove = function (e) {
            let x = e.clientX;
            let y = e.clientY;
            sbX = x;
            sbY = y;

            // for (let i = 0; i < pointList.length; i++) {
            //     let point = pointList[i];
            //     let distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
            //     if (distance < 100) {
            //         point.x = x
            //         point.y = y
            //     }
            // }
        }

        // 初始化点
        function initPoint() {
            for (let i = 0; i < 1000; i++) {
                let point = new Point(Math.random() * appWidth, Math.random() * appHeight, 'white');
                pointList.push(point);
            }
        }

        initPoint();

        function animate() {
            ctx.clearRect(0, 0, appWidth, appHeight);
            for (let i = 0; i < pointList.length; i++) {
                let point = pointList[i];
                if (sbX != null || sbY != null) {
                    let distance = Math.sqrt(Math.pow(point.x - sbX, 2) + Math.pow(point.y - sbY, 2));
                    if (distance < 400) {
                        point.line({ x: sbX, y: sbY })

                    }
                }
                point.update();

            }
            requestAnimationFrame(animate);
        }

        animate();




    </script>
</body>

</html>