JavaScript星星连线技巧

最新推荐文章于 2023-07-31 19:20:22 发布
最新推荐文章于 2023-07-31 19:20:22 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： javascript基础 前端 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36982349/article/details/123409197
版权

效果图
1111.png

一个星星的实现

对视口进行处理：

// 获取视口的宽
var width = document.documentElement.clientWidth;
// 获取视口的高
var height = document.documentElement.clientHeight;

对canvas处理：

// 获取canvas
var canvas = document.getElementById("myCanvas");
// 获取画笔
var ctx = canvas.getContext("2d");
// 赋值canvas的宽
canvas.width = width;
// 赋值canvas的高
canvas.height = height;
// 改变填充色
ctx.fillStyle = "white";

处理星星：

// 定义星星x值
var x = parseInt(Math.random() * width);
// 定义星星y值
var y = parseInt(Math.random() * height);
// 星星移动速度的x方向
var x_speed = .6; 
// 星星移动速度的y方向
var y_speed = .7; 
// 星星的半径
var r = 2;
// 绘制星星
// 开启路径
ctx.beginPath();
// 绘制圆
ctx.arc(x, y, r, 0, Math.PI * 2);
// 闭合路径
ctx.closePath();
// 填充
ctx.fill();

最后一步设置定时器

// 开启定时器
var timer = setInterval(function() {
        // 清屏
        ctx.clearRect(0, 0, width, height);
        // 移动
        x -= x_speed;
        y -= y_speed;
        // 渲染
        // 开启路径
        ctx.beginPath();
        // 绘制圆
        ctx.arc(x, y, r, 0, Math.PI * 2);
        // 闭合路径
        ctx.closePath();
        // 填充
        ctx.fill();
}, 20)

优化为面向对象形式

第一步与上面不变，改变的是我们定义了start类

// 定义Star类
function Star(ctx, x, y, r) {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.r = r;
    this.x_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1);
    this.y_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1);
}

然后讲方法写到类上

// 方法要写在原型上
// 移动方法
Star.prototype.move = function() {
        this.x -= this.x_speed;
        this.y -= this.y_speed;
}
// 转向X方法
Star.prototype.changeX = function() {
        this.x_speed = - this.x_speed;
}
// 转向Y方法
Star.prototype.changeY = function() {
        this.y_speed = - this.y_speed;
}

然后进行渲染方法和初始化

// 渲染方法
Star.prototype.render = function() {
    // 开启路径
    this.ctx.beginPath();
    // 绘制圆
    this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    // 闭合路径
    this.ctx.closePath();
    // 填充
    this.ctx.fill();
}
// 初始化星星对象
var star = new Star(ctx, Math.random() * width, Math.random() * height, 2);
star.render();

最后修改定时器

// 开启定时器
var timer = setInterval(function() {
    // 清屏
    ctx.clearRect(0, 0, width, height);
    // 移动
    star.move();
    // 判断边界
    if (star.x < 0 || star.x > width) {
            star.changeX();
    }

    if (star.y < 0 || star.y > height) {
            star.changeY();
    }
    // 渲染
    star.render();
}, 20)

浏览器显示结果
image.png

多个星星处理

我们在面向对象的基础上修改start类的定义

	// 定义Star类
function Star(ctx, x, y, r) {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.r = r;
    this.x_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
    this.y_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
}

多个星星需要我们定义一个数组进行存储

// 定义数组 用于存放每一个星星对象
var arr = [];
// 初始化星星对象
for (var i = 0; i < 100; i++) {
        arr.push(new Star(ctx, Math.random() * width, Math.random() * height, 1));
}

然后定时器中使用数组循环

// 开启定时器
var timer = setInterval(function() {
    // 清屏
    ctx.clearRect(0, 0, width, height);
    arr.forEach(function(value, index) {
        // 移动
        value.move();
        // 判断边界
        if (value.x < 0 || value.x > width) {
                value.changeX();
        }
        if (value.y < 0 || value.y > height) {
                value.changeY();
        }
        // 渲染
        value.render();
    })
}, 20)

效果图如下

image.png

星星连线

定义Star类

function Star(ctx, x, y, r) {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.r = r;
    this.x_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
    this.y_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
}

这次我们需要对鼠标操作进行处理

// 创建鼠标星星对象
var mouse_star = new Star(ctx, 0, 0, 2);
document.onmousemove = function(e) {
    // 获取鼠标的位置
    var x = e.clientX;
    var y = e.clientY;
    // 赋值mouse_star对象中的x 和 y值
    mouse_star.x = x;
    mouse_star.y = y;
}

定时器中需要增加鼠标操作以及星星之间的关系处理

// 开启定时器
var timer = setInterval(function() {
    // 清屏
    ctx.clearRect(0, 0, width, height);
    // 渲染星星对象的方法
    mouse_star.render();
    arr.forEach(function(value, index) {
        // 移动
        value.move();
        // 判断边界
        if (value.x < 0 || value.x > width) {
                value.changeX();
        }

        if (value.y < 0 || value.y > height) {
                value.changeY();
        }
        // 渲染
        value.render();
    });

    // 循环判断
    arr.forEach(function(value, index) {
        // value表示每一个星星，我们应该拿着这个星星与其它所有星星作比较
        for (var i = index + 1; i < arr.length; i++) {
            if (Math.abs(value.x - arr[i].x) < 50 && Math.abs(value.y - arr[i].y) < 50) {
                // 连线
                line(value.x, value.y, arr[i].x, arr[i].y);
            }
        }

        // 判断星星与其它所有星星之间的关系
        if (Math.abs(value.x - mouse_star.x) < 150 && Math.abs(value.y - mouse_star.y) < 150) {
            // 连线
            line(value.x, value.y, mouse_star.x, mouse_star.y);
        }
    })
}, 20);

然后我们需要添加点击事件

// 给document添加点击事件
// 当点击的时候出现多个星星
document.onmousedown = function(e) {
    for (var i = 0; i < 5; i++) {
        arr.push(new Star(ctx, e.clientX, e.clientY, 1));
        arr.shift();
    }
}

最后进行封装

// 封装函数，传递两个点，绘制两个点之间的线段
function line(x1, y1, x2, y2) {
    // 开启路径
    ctx.beginPath();
    // 移动画笔到某个位置
    ctx.moveTo(x1, y1);
    // 绘制路径
    ctx.lineTo(x2, y2);
    // 关闭路径
    ctx.closePath();
    // 描边
    ctx.stroke();
}

完成代码，只需要新建一个html文件，复制全部代码粘贴就行，需要注意背景图片自己可以换一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas {
            background-image: url(imgs/sf.jpg);
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript">
    // 获取视口的宽
    var width = document.documentElement.clientWidth;
    // 获取视口的高
    var height = document.documentElement.clientHeight;
    // 获取canvas
    var canvas = document.getElementById("myCanvas");
    // 获取画笔
    var ctx = canvas.getContext("2d");
    // 赋值canvas的宽
    canvas.width = width;
    // 赋值canvas的高
    canvas.height = height;
    // 改变填充色
    ctx.fillStyle = "white";
    // 改变线条颜色
    ctx.strokeStyle = "rgba(255, 255, 123, .4)";
    // 改变线宽
    ctx.lineWidth = ".3";
    // 定义Star类
    function Star(ctx, x, y, r) {
        this.ctx = ctx;
        this.x = x;
        this.y = y;
        this.r = r;
        this.x_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
        this.y_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;
    }

    // 方法要写在原型上
    // 移动方法
    Star.prototype.move = function() {
        this.x -= this.x_speed;
        this.y -= this.y_speed;
    }

    // 转向X方法
    Star.prototype.changeX = function() {
        this.x_speed = - this.x_speed;
    }
    // 转向Y方法
    Star.prototype.changeY = function() {
        this.y_speed = - this.y_speed;
    }

    // 渲染方法
    Star.prototype.render = function() {
        // 开启路径
        this.ctx.beginPath();
        // 绘制圆
        this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        // 闭合路径
        this.ctx.closePath();
        // 填充
        this.ctx.fill();
    }

    // 定义数组 用于存放每一个星星对象
    var arr = [];
    for (var i = 0; i < 100; i++) {
        arr.push(new Star(ctx, Math.random() * width, Math.random() * height, 1));
    }


    // 创建鼠标星星对象
    var mouse_star = new Star(ctx, 0, 0, 2);
    document.onmousemove = function(e) {
        // 获取鼠标的位置
        var x = e.clientX;
        var y = e.clientY;
        // 赋值mouse_star对象中的x 和 y值
        mouse_star.x = x;
        mouse_star.y = y;
    }


// 开启定时器
var timer = setInterval(function() {
    // 清屏
    ctx.clearRect(0, 0, width, height);
    // 渲染星星对象的方法
    mouse_star.render();
    arr.forEach(function(value, index) {
        // 移动
        value.move();
        // 判断边界
        if (value.x < 0 || value.x > width) {
            value.changeX();
        }

        if (value.y < 0 || value.y > height) {
            value.changeY();
        }
        // 渲染
        value.render();
    });

    // 循环判断
    arr.forEach(function(value, index) {
        // value表示每一个星星，我们应该拿着这个星星与其它所有星星作比较
        for (var i = index + 1; i < arr.length; i++) {
            if (Math.abs(value.x - arr[i].x) < 50 && Math.abs(value.y - arr[i].y) < 50) {
                // 连线
                line(value.x, value.y, arr[i].x, arr[i].y);
            }
        }

        // 判断星星与其它所有星星之间的关系
        if (Math.abs(value.x - mouse_star.x) < 150 && Math.abs(value.y - mouse_star.y) < 150) {
            // 连线
            line(value.x, value.y, mouse_star.x, mouse_star.y);
        }
    })
}, 20);


    // 给document添加点击事件
    // 当点击的时候出现多个星星
    document.onmousedown = function(e) {
        for (var i = 0; i < 5; i++) {
            arr.push(new Star(ctx, e.clientX, e.clientY, 1));
            arr.shift();
        }
    }

    // 封装函数，传递两个点，绘制两个点之间的线段
    function line(x1, y1, x2, y2) {
        // 开启路径
        ctx.beginPath();
        // 移动画笔到某个位置
        ctx.moveTo(x1, y1);
        // 绘制路径
        ctx.lineTo(x2, y2);
        // 关闭路径
        ctx.closePath();
        // 描边
        ctx.stroke();
    }
    </script>
</body>
</html>

源码仓库和效果

每步的案例源代码已上传，需要的可以下载自己看看，可以用于网站背景效果。点击源码下载

在线效果图，点击体验星星连线

进入页面后，鼠标连接多个线或者多次点击，体验效果。

最后

微信搜索【前端每日技巧】关注公众号，写作不易，希望能点赞👍️加收藏❤️和转发。

周帅帅Love
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线（包含箭头）
01-09
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
html星星连线特效代码,js实现飞入星星特效代码
weixin_39789327的博客
06-04 477
本文实例讲述了js实现飞入星星特效代码，分享给大家供大家参考。具体实现代码如下：代码如下:星空极速飞入效果xL=8;xH=xW=xR=xE=xMY=xMX=xWd=xHd=0;xF=new Array();xY=new Array();xX=new Array();xS=new Array();xA=new Array();xB=new Array();ini=new Array();docume...
Canvas+JS实现星空l粒子连线效果
一个鮕娘的博客
07-21 5251
效果截图： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial- scale=1.0"&
[玩耍]JavaScript几何星空连线(鼠标跟随)完善
蟹脑板的博客
01-28 2300
完善了一下星空连线背景效果. 添加了粒子的鼠标跟随的效果. 参考的类似功能的JS源码都处理压缩过, 没有换行缩进, 变量名都是a, b, c… 看着真累啊. 把两次遍历改成了一次遍历, 把鼠标所在的点 p0 与 points 数组 concat 到一起处理了. 舍弃了原来按时间间隔计算移动距离的方法, 直接每一帧移动一定距离. 优化了代码, 提高了些性能. 鼠标跟随的原理是, 当粒子靠近鼠标指针到...
canvas实现粒子星空连线
while(true){alert(
08-23 5942
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>离子星空</title> <style type="text/css"> * { margin: 0; ...
Javascript生成随机点实现连线功能
qq_52624820的博客
04-13 637
如需完整代码，请mail [email protected]。做了判断，让随机点不会超过画布边缘。每按下一次按钮，点数+1。初始状态生成十个随机点。
js+css实现两个dom元素之间的连线
热门推荐
u598975767的专栏
02-20 1万+
刷论坛时，看到有小伙伴提问不依赖图形化工具，怎么实现两个div之间的连线， 看着追问的人不少，顺题发挥了下， 下面代码实现两个dom元素中心坐标的连线，首先引入jquery（任意版本），主要是为了方便dom操作，当然改成原生js也可以 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
javascript实现几何粒子星空连线背景效果
最新发布
liuchao的博客
07-31 341
/ 点之间连线长度(的平方)var BACKGROUND_COLOR = "rgba(0, 43, 54,1)";
canvas绘制经典星空连线效果
weixin_33895475的博客
06-06 202
废话不说先上图： 关于这个效果我第一次见是在https://www.mengxiaozhu.cn/后来知乎登录页也开始用了https://www.zhihu.com/网络上还有很多地方都在用，效果还是不错的。我见了之后觉得挺有意思的就研究了一下原理下面开始coding：先写个canvas标签 <canvas height="620"...
Javascript高级技巧分享
10-26
主要介绍了Javascript高级技巧,需要的朋友可以参考下
js canvas实现星空连线背景特效
10-16
主要介绍了js canvas实现星空连线背景特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
H5+canvas+js实现连线题
05-09
根据canvas画布工具生成连线题样式及取值回调等功能，实现纵向题连线和横向题连线两个模板
DIV+JS画图,DIV与DIV之间的连线!
11-15
实现DIV与DIV之间的连线,工程流程图那样.使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法： var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow(5,26,200,200,"red");
jsPlumb 强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等
10-28
jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大
canvas实现js、html连线
02-19
基于canvas实现js、html连线，可左右连线，也可上下连线，html连线，
Javascript常用小技巧汇总
10-24
主要介绍了Javascript常用小技巧,实例汇总了javascript运算符、表达式及遍历等常用技巧,需要的朋友可以参考下
JavaScript编程学习技巧汇总
10-22
主要介绍了JavaScript编程学习技巧汇总，整理了编程技巧、实用函数、简洁方法、编程细节等相关资料，感兴趣的小伙伴们可以参考一下
Javascript 实用小技巧
10-29
都是一些非常不错的js 小技巧,学习js的朋友一定要看下，有很多不错的代码。
JavaScript编码小技巧分享
10-14
适合任何一位基于JavaScript开发的开发者。我写这篇文章主要涉及JavaScript中一些简写的代码，帮助大家更好理解一些JavaScript的基础。希望这些代码能从不同的角度帮助你更好的理解JavaScript。
javascript写字技巧_js canvas实现写字动画效果
06-13
2. 使用JavaScript获取Canvas的上下文对象。 3. 设置字体、颜色、阴影等样式属性。 4. 使用Canvas的beginPath()方法开始绘制路径。 5. 使用Canvas的moveTo()和lineTo()方法绘制字母路径。 6. 使用Canvas的stroke...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值