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 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
小程序新版订阅消息模板消息
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
PHPlet在Windows下的安装
2006/10/09 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
10 个经典PHP函数
2013/10/17 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
bootstrap table操作技巧分享
2017/02/15 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 高级专用类方法的实例详解
2017/09/11 Python
浅谈django orm 优化
2018/08/18 Python
浅谈Django的缓存机制
2018/08/23 Python
python随机数分布random测试
2018/08/27 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
护士自我评价范文
2014/01/25 职场文书
《灯光》教学反思
2014/02/08 职场文书
反邪教标语
2014/06/23 职场文书
村道德模范事迹材料
2014/08/28 职场文书
师德师风个人整改措施
2014/10/27 职场文书
首席执行官观后感
2015/06/03 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫