Canvas实现动态粒子连线效果（附代码）

码农天地 - 2020-06-21 23:02:43

本篇文章给大家通过示例来介绍一下JS+Canvas制作动画，实现动态粒子连线效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

JS+Canvas制作动画，实现动态粒子连线效果

效果图如下

思路如下：

绘制随机区域的粒子，记录每个粒子x轴、y轴坐标以及x轴与y轴每次移动的距离

通过定时函数使得粒子进行移动，移动后判断是否超过界限，超过则将该粒子删除并生成一个新的粒子

判断所有粒子之间的距离，对给定距离的粒子进行连线。

代码如下：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Canvas动态粒子连线</title> </head> <body> <canvas id="myCanvas" style="border: 1px solid #ddd; display: block;margin: 20px auto;"></canvas> <script> var myCanvas = document.getElementById("myCanvas"); myCanvas.width = "800"; myCanvas.height = "800"; var cxt = myCanvas.getContext("2d"); cxt.fillStyle="#ddd"; var points =new Array(); //绘制60个粒子 for(var i=0;i<60;i++) { drawlizi(); } setInterval(movelizi,100); //绘制静态粒子 function drawlizi(){ var x = generate_random(3,797); var y = generate_random(3,797); var speedx = generate_random(-4,4); var speedy = generate_random(-4,4); //防止出现不移动的粒子 while(speedx==0&&speedy==0) { speedx = generate_random(-4,4); speedy = generate_random(-4,4); } var point={ x_index:x, y_index:y, x_speed:speedx, y_speed:speedy }; points.push(point); cxt.beginPath(); cxt.arc(x,y,3,0,360); cxt.closePath(); cxt.fill(); } //粒子移动 function movelizi(){ cxt.clearRect(0, 0,myCanvas.width,myCanvas.height); for(var i=0;i<points.length;i++) { points[i].x_index = points[i].x_index+points[i].x_speed; points[i].y_index = points[i].y_index+points[i].y_speed; cxt.beginPath(); cxt.arc(points[i].x_index,points[i].y_index,3,0,360); cxt.closePath(); cxt.fill(); //判断超过界限删除并再生 if((points[i].x_index<3||points[i].y_index<3)||(points[i].x_index>797||points[i].y_index<3)||(points[i].x_index<3||points[i].y_index>797)||(points[i].x_index>797||points[i].y_index>797)){ points.splice(i,1); drawlizi(); } } //相近的粒子进行连线 for (var i=0;i<points.length;i++) { for (var j=0;j<points.length;j++) { if(i!=j) { var one_x = points[i].x_index; var one_y = points[i].y_index; var two_x = points[j].x_index; var two_y = points[j].y_index; // 根据两点间的距离公式，小于界限值便进行连线 var jl = Math.sqrt(Math.pow(one_x-two_x,2)+Math.pow(one_y-two_y,2)); if(jl<100) { cxt.strokeStyle="#ddd"; cxt.moveTo(one_x,one_y); cxt.lineTo(two_x,two_y); cxt.stroke(); } } } } } //生成两个数之间的随机数 function generate_random(min,max){ return Math.floor(Math.random()*(max-min)+min); } </script> </body> </html>

更多炫酷的页面特效，可访问：js代码特效栏目！！

以上就是Canvas实现动态粒子连线效果（附代码）的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：Canvas html5 javascript本文转载于：csdn，如有侵犯，请联系a@php.cn删除上一篇：原生JS使用transform实现banner的无限滚动效果下一篇：带你了解ES6的Set，WeakSet，Map和WeakMap

相关视频

canvas如何实现七巧板图案和粒子时钟效果？（代...canvas实现雪花随机动态飘落效果（代码示例）HTML5 canvas如何实现代码流瀑布？（附代...用JavaScript将Canvas内容转化成图片...Canvas实现动态粒子连线效果（附代码）Canvas标签和Canvas对象JavaScript变量JavaScript数据类型

网友评论

文明上网理性发言，请遵守新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

青灯夜游

今天学习一小步，明天提升一大步

最近文章分享 10 个提高 JavaScript 技能的测验问答23115个你可能还不了解的 Git 命令987分享一些值得前端开发者收藏的 GitHub 库437发布技术文章最新文章热门排行

小程序swiper轮播CSS3动画及跳转到指定swiper-item的使用15道Vue常见面试题解析JavaScript中Number()方法的两种用法JavaScript怎么检测当前浏览器是无头浏览器JS 如何获取扫码枪输入数据一起看看JavaScript如何获取页面上被选中的文字现代JavaScript使用技巧之ES6中的简写语法用JavaScript获取伪元素(Pseudo-Element)属性的方法详解

RN布局的实例详解jQ选择器汇总JS是什么意思json格式是什么？json格式文件怎么打开？vue.js中created方法的使用详解echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）js数组如何删除指定位置的元素？删除指定位置元素的2种方法怎样实现Vue项目中使用Vux推荐视频教程Canvas 绘制时钟炫丽的倒计时效果Canvas绘图与动画JavaScript深入视频教程HTML5 Canvas 动画实战教程视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 287557;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！合肥彼岸互联信息技术有限公司

座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：了解JS滚轮事件(mousewheel/DOMMouseScroll)

下一篇： layui实现登录功能的方法

Tags 标签

加个好友，技术交流

码农天地

首页 HTML/CSS WEB服务器 PHP Linux 数据库异常报错插件工具美文欣赏站长直荐