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 imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
小程序新版订阅消息模板消息
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
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
python之yield表达式学习
2014/09/02 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python简易版图书管理系统
2019/08/12 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
python 实现有道翻译功能
2021/02/26 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
新闻专业毕业生英文求职信
2014/03/19 职场文书
法人代表委托书
2014/04/04 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript