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 数值型和字符串型之间的转换
Jul 25 Javascript
Javascript Math对象
Aug 13 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
vue实现搜索功能
May 28 Javascript
vue 集成jTopo 处理方法
Aug 07 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
php 什么是PEAR?
2009/03/19 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Python处理JSON数据并生成条形图
2016/08/05 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
大学生求职自荐信
2013/12/12 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript