迷人的小球-canvas

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
    init()
})

function init() {
    const myCanvas: HTMLCanvasElement = document.getElementById("main_canvas") as HTMLCanvasElement
    const ctx = myCanvas.getContext("2d")

    let ballArr: Ball[] = []
    myCanvas.width = document.documentElement.clientWidth - 30
    myCanvas.height = document.documentElement.clientHeight - 30

    class Ball {
        x: number = Math.floor(Math.random() * myCanvas.width)    //距离left的距离
        y: number = Math.floor(Math.random() * myCanvas.height)    //距离top的距离
        dx: number = Math.floor(Math.random() * 10) - 5   //横向移动速度
        dy: number = Math.floor(Math.random() * 10) - 5    //纵向移动速度
        r: number = 10  //小球半径
        color: string = 'gray'   //小球颜色

        constructor() {
            ballArr.push(this)
        }

        //渲染小球
        render() {
            if (ctx !== null) {
                ctx.beginPath()
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false)
                ctx.globalAlpha = 1   //小球的透明度
                ctx.fillStyle = this.color
                ctx.fill()
            }
        }

        //更新小球
        update() {
            //横向更新
            this.x = this.x + this.dx
            //距离左侧的距离或者距离右侧距离太小
            if (this.x <= this.r) {
                this.x = this.r
            }
            else if (this.x >= myCanvas.width - this.r) {
                this.x = myCanvas.width - this.r
            }

            //纵向更新
            this.y = this.y + this.dy
            //距离上侧的距离或者距离下侧距离太小
            if (this.y <= this.r) {
                this.y = this.r
            }
            else if (this.y >= myCanvas.height - this.r) {
                this.y = myCanvas.height - this.r
            }


            //小球碰到侧边返回
            if (this.x + this.r >= myCanvas.width || this.x - this.r <= 0) {
                this.dx = this.dx * (-1)
            }
            if (this.y + this.r >= myCanvas.height || this.y - this.r <= 0) {
                this.dy = this.dy * (-1)
            }
        }

    }


    //创建小球
    for (let i = 0; i < 150; i++) {
        new Ball()
    }

    //定时器动画
    setInterval(() => {
        if (ctx !== null) {
            ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
        }
        //小球渲染更新
        for (let index = 0; index < ballArr.length; index++) {
            const element = ballArr[index];
            element.render()
            element.update()
        }

        //画线
        if (ctx !== null) {
            for (let index = 0; index < ballArr.length; index++) {
                for (let index1 = index + 1; index1 < ballArr.length; index1++) {
                    let indexElement = ballArr[index]
                    let index1Element = ballArr[index1]
                    let distance = Math.sqrt(Math.pow(indexElement.x - index1Element.x, 2) + Math.pow(indexElement.y - index1Element.y, 2))
                    if (distance <= 150) {
                        ctx.strokeStyle = '#000'
                        ctx.beginPath()
                        //根据距离设置透明度
                        ctx.globalAlpha = 1 - distance/150
                        ctx.moveTo(indexElement.x,indexElement.y)
                        ctx.lineTo(index1Element.x,index1Element.y)
                        ctx.closePath()
                        ctx.stroke()
                    }
                }

            }
        }
    }, 1000 / 60)


}

</script>
<template>
    <canvas id="main_canvas"></canvas>
</template>
<style scoped></style>