鼠标移动淡入淡出Canvas小球效果_特炫

先看效果

鼠标移动生成不同颜色小球向不同方向以移动

html

<style>
      html,
      body {
     
          width: 100%;
          height: 100%;
      }
      canvas{
     
            background: black;
        }
 </style>
<canvas id="canvas"></canvas>

JS

 <script>
        let canvas = document.getElementById('canvas')
        window.onresize = canvasOnresize
        //页面大小改变 canvans大小改变
        function canvasOnresize() {
     
            canvas.width = document.getElementsByTagName('body')[0].clientWidth
            canvas.height = document.getElementsByTagName('body')[0].clientHeight
        }
        //初始化canvas的高度 宽度 跟随页面的大小
        canvasOnresize()
        //生成小圆
        //初始化画笔
        let ctx = canvas.getContext("2d")
        //装Ball对象的数组
        let ballList = []
        //颜色数组
        let colorList = ["red", "green", "yellow", "blue", "black", "#ccc"]
        function Ball(x, y) {
     
            this.x = x; //横轴坐标
            this.y = y;//纵轴坐标
            this.color = colorList[Math.floor(this.mathRandom(0, 6))];//随机生成颜色
            this.xv = this.mathRandom(-5, 5);//x轴的分散速度
            this.yv = this.mathRandom(-5, 5);//y轴的分散速度
            this.Alpha1 = 1; //开始透明度
            this.Alpha2 = 0.85;
        }
        //生成小球
        Ball.prototype.update = function () {
     
            ctx.save();
            ctx.beginPath()
            ctx.fillStyle = this.color// 背景颜色为红色
            ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false)
            ctx.fill()
            ctx.closePath()
        }
        //小球移动
        Ball.prototype.move = function () {
     
            this.Alpha1*= this.Alpha2
            ctx.globalAlpha = this.Alpha1 ;
            this.x += this.xv
            this.y += this.yv
        }
        //随机生成 随机数
        Ball.prototype.mathRandom = function (min, max) {
     
            return (max - min) * Math.random() + min
        }
        // canvas  2  鼠标移动
        canvas.addEventListener('mousemove', function (e) {
     
                ballList.push(new Ball(e.clientX, e.clientY))  
        })
        //1  触发事件
            changeBall()
        function changeBall() {
     
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            //循环Ball实例上方法
            ballList.map((item) => {
     
                item.update()
                item.move()
            })
            //按照电脑最优状态执行定动画效果
            requestAnimationFrame(changeBall)
        }
    </script>