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 相关文章推荐
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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 咖啡文化
天津市收音机工业发展史
2021/03/04 无线电
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
php实现的生成排列算法示例
2019/07/25 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
详解Angular6 热加载配置方案
2018/08/18 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
python 贪心算法的实现
2020/09/18 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
网吧消防安全制度
2014/01/28 职场文书
生日主持词
2014/03/20 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
民间借贷被告代理词
2015/05/23 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android