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 国际象棋棋盘 实现代码
Jun 26 Javascript
Js 中debug方式
Feb 07 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
在vue中实现echarts随窗体变化
Jul 27 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漏洞全解(详细介绍)
2012/11/13 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
python3处理含有中文的url方法
2018/05/10 Python
python实现ID3决策树算法
2018/08/29 Python
python 日期排序的实例代码
2019/07/11 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
大学军训感言400字
2014/03/11 职场文书
北京奥运会口号
2014/06/21 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
西游记读书笔记
2015/06/25 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
css3 选择器
2022/05/11 HTML / CSS
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS