使用ES6实现一个绚丽的鼠标滑动效果

最新推荐文章于 2025-06-03 23:12:27 发布

原创

最新推荐文章于 2025-06-03 23:12:27 发布 · 899 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何利用ES6语法创建一个鼠标滑动时的绚丽效果。通过在HTML中添加canvas标签，并将主要逻辑放在JavaScript中，演示了实现这一效果的完整代码，读者可以参考并实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常我们在访问一些网站的时候，进行鼠标滑动的时候，会出现非常绚丽的效果，下面我们就用ES6的方式，编写一个简单的鼠标滑动的效果；

<canvas id="canvas"></canvas>

上面的是这个demo的html的标签，创建了一个canvas标签，其他的处理我们会放在js中进行，我会把所有的js代码都放在下面，可以参照观看：

 // 0.定义一个取两个数之间的额随机数的方法
        let newMath = (x, y) => {
            let tmp = y -x;
            return Math.floor(Math.random()*tmp + x);
        }
        //1.生成一个随机的色值
        let randomRgbColor = () => { //随机生成RGBA颜色
            let r = Math.floor(Math.random() * 256); //随机生成256以内r值
            let g = Math.floor(Math.random() * 256); //随机生成256以内g值
            let b = Math.floor(Math.random() * 256); //随机生成256以内b值
            return `rgba(${r},${g},${b},.5)`; //返回rgb(r,g,b,a)格式颜色
        }
        // 2.获取当前的画布
        const canvas = document.getElementById('canvas');
        const c