javascript Canvas动态粒子连线


Posted in Javascript onJanuary 01, 2020

好久没写博客了,最近负责了公司年会的大屏签到、滚动抽奖、节目投票,整个项目做下来有惊也有喜。期间用到了Canvas制作动画,我这边就简单做了个动态粒子连线的例子与大家分享。

一、效果图

javascript Canvas动态粒子连线

二、思路如下:

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

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

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

三、代码如下:

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery iframe操作详细解析
Nov 20 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
vue实现学生信息管理系统
May 30 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
小程序新版订阅消息模板消息
Dec 31 #Javascript
小程序实现长按保存图片的方法
Dec 31 #Javascript
使用webpack搭建vue环境的教程详解
Dec 31 #Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 #Javascript
TypeScript之调用栈的实现
Dec 31 #Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 #Javascript
Vue实现剪贴板复制功能
Dec 31 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
easyui的tabs update正确用法分享
2014/03/21 PHP
PHP单例模式详细介绍
2015/07/01 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Golang与python线程详解及简单实例
2017/04/27 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
使用python绘制二维图形示例
2019/11/22 Python
python中def是做什么的
2020/06/10 Python
python3.7添加dlib模块的方法
2020/07/01 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
档案工作个人总结
2015/03/03 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
详解Python中的进程和线程
2021/06/23 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript