JS实现线条动态背景

Studious_S

于 2021-02-18 22:17:38 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/Studious_S/article/details/113854314

本文介绍了一种使用JavaScript实现线条随机运动的背景效果，当鼠标移动时，线条具有吸附性。通过创建canvas画布，绘制并移动随机分布的圆点，以及根据鼠标位置动态连接线条，实现了这一视觉效果。代码中详细解释了各个函数的作用，包括画圆、移动圆点、画线以及处理鼠标事件等。

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

[Top] JS实现线条动态背景

线条随机运动，鼠标移动过程中，有吸附性，话不多说，直接上代码吧!

!function () {
        let num = 100;
        //设置所画线的颜色
        let colorLine = "138,43,226"
        //创建画布
        let canvas = document.createElement('canvas');
        //将创建的画布添加至body标签当中
        document.getElementsByTagName('div')[0].appendChild(canvas)
        let ctx = canvas.getContext('2d');
        //获取当前页面的宽高,并同时设置给予画布
        let myWidth = canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        let myHeight = canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        let newCircleArray,allCircle = []

        //获取动画帧，用于更新动画
        let ani = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function (n) {
                window