随机点变动

最新推荐文章于 2022-01-05 16:24:48 发布
最新推荐文章于 2022-01-05 16:24:48 发布
阅读量595 收藏
点赞数
分类专栏： jq html5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccj1990528/article/details/45921151
版权

好久没来写博客了，最近被公司的一个傻逼部门拖着了，一直忙到现在，今天才把他们的第二版做好，唉。。。郁闷的不行，算了，不讲废话了。开始进入正题吧。

这个组件是在canvas上的各个点连成线，然后随机变动，当长度达到一个值的时候线就会断掉。

// JavaScript Document
function main(option){
	this.count=option.count;
	this.parentnode=option.parentnode;
	this.parentnode.style.height=option.canvas_height+"px";
	this.parentnode.style.width=option.canvas_width+"px";
	this.canvas_width=option.canvas_width;
	this.canvas_height=option.canvas_height;
	this.delay=option.delay;
	
	
	this.index=Math.floor(Math.random()*2);
	this.x1;this.y1;this.x2;this.y2;this.x3;this.y3;this.pos;this.pos2;this.pos3;this.x4;this.y4;this.x5;this.y5;this.pos4;this.pos5;
	this.params;this.flag=false;this.flag2=false;this.flag3=false;this.flag4=false;this.flag5=false;
	}
main.prototype={
	init:function(){
		
		this.stratpos();
		this.stratpos2();
		this.stratpos3();
		this.stratpos4();
		this.stratpos5();
		this.y1=this.pos.y;
		this.x1=this.pos.x;
		this.y2=this.pos2.y;
		this.x2=this.pos2.x;
		this.y3=this.pos3.y;
		this.x3=this.pos3.x;
		this.y4=this.pos4.y;
		this.x4=this.pos4.x;
		this.y5=this.pos5.y;
		this.x5=this.pos5.x;
		this.canvas=this.createElem("canvas",{style:"position:absolute; left:0; top:0;"});
		this.canvas.height=this.canvas_height;
		this.canvas.width=this.canvas_width;
		this.parentnode.appendChild(this.canvas);
		this.ctx=this.canvas.getContext("2d");
		
		var _this=this;
		setInterval(function(){_this.equation();},this.delay);
		},
		
	//---------------------------------------------------------------添加元素方法
	
	createElem:function(tagname,stylecss){
		var elem=document.createElement(tagname);  
        for(var cssindex in stylecss){  
            elem.setAttribute(cssindex,stylecss[cssindex]);  
            }  
            return elem;
		},
	
	
	//-------------------------------------------------------------原点移动的方程
	stratpos:function(){
		this.ranx = Math.random();
		this.rany = Math.random();
		var posX,posY;
				posX=Math.floor(50-this.ranx*30);
				posY=Math.floor(this.rany*30+15);
				
		this.pos={
			"x":posX,
			"y":posY
			}
			//console.log(posX + "," +posY);
		},
	
	//-------------------------------------------------------------------第一个点
	equation:function(){
		this.animationcircle();
		},
	
	//----------------------------------------------动画
	animationcircle:function(){
		
		
		this.params=[];
		
		
		if(this.x1-this.pos.x>10){
			this.y1=this.x1+(this.pos.y-this.pos.x);
			this.x1=this.x1-0.05;
			this.flag=false;
			}else if(this.x1-this.pos.x<=-10){
				this.y1=this.x1+(this.pos.y-this.pos.x);
				this.x1=this.x1+0.05;
				this.flag=true;
				}else{
					if(this.flag){
						this.y1=this.x1+(this.pos.y-this.pos.x);
						this.x1=this.x1+0.05;
						}
					else if(!this.flag){
						this.y1=this.x1+(this.pos.y-this.pos.x);
						this.x1=this.x1-0.05;
						}
					}
		if(this.x2-this.pos2.x>15){
			this.y2=2*this.x2+(this.pos2.y-this.pos2.x*2);
			this.x2=this.x2-0.05;
			this.flag2=false;
			}else if(this.x2-this.pos2.x<-15){
				this.y2=2*this.x2+(this.pos2.y-this.pos2.x*2);
				this.x2=this.x2+0.05;
				this.flag2=true;
				}else{
					if(this.flag2){
						this.y2=2*this.x2+(this.pos2.y-this.pos2.x*2);
						this.x2=this.x2+0.05;
						}
					else if(!this.flag2){
						this.y2=2*this.x2+(this.pos2.y-this.pos2.x*2);
						this.x2=this.x2-0.05;
						}
					}
		if(this.x3-this.pos3.x>20){
			this.y3=3*this.x3+(this.pos3.y-this.pos3.x*3);
			this.x3=this.x3-0.05;
			this.flag3=false;
			}else if(this.x3-this.pos3.x<-20){
				this.y3=3*this.x3+(this.pos3.y-this.pos3.x*3);
				this.x3=this.x3+0.05;
				this.flag3=true;
				}else{
					if(this.flag3){
						this.y3=3*this.x3+(this.pos3.y-this.pos3.x*3);
						this.x3=this.x3+0.05;
						}
					else if(!this.flag3){
						this.y3=3*this.x3+(this.pos3.y-this.pos3.x*3);
						this.x3=this.x3-0.05;
						}
					}
					
			if(this.x4-this.pos4.x>25){
			this.y4=this.x4+(this.pos4.y-this.pos4.x);
			this.x4=this.x4-0.05;
			this.flag4=false;
			}else if(this.x4-this.pos4.x<-25){
				this.y4=this.x4+(this.pos4.y-this.pos4.x);
				this.x4=this.x4+0.05;
				this.flag4=true;
				}else{
					if(this.flag4){
						this.y4=this.x4+(this.pos4.y-this.pos4.x);
						this.x4=this.x4+0.05;
						}
					else if(!this.flag4){
						this.y4=this.x4+(this.pos4.y-this.pos4.x);
						this.x4=this.x4-0.05;
						}
					}		
					
			if(this.x5-this.pos5.x>30){
			this.y5=0.5*this.x5+(this.pos5.y-this.pos5.x*0.5);
			this.x5=this.x5-0.05;
			this.flag5=false;
			}else if(this.x5-this.pos5.x<-30){
				this.y5=0.5*this.x5+(this.pos5.y-this.pos5.x*0.5);
				this.x5=this.x5+0.05;
				this.flag5=true;
				}else{
					if(this.flag5){
						this.y5=0.5*this.x5+(this.pos5.y-this.pos5.x*0.5);
						this.x5=this.x5+0.05;
						}
					else if(!this.flag5){
						this.y5=0.5*this.x5+(this.pos5.y-this.pos5.x*0.5);
						this.x5=this.x5-0.05;
						}
					}
			
			
			this.drawcircle();		
		},
	
	drawcircle:function(){
		
		this.ctx.clearRect(0,0,this.canvas_width,this.canvas_height);
		this.ctx.fillStyle="rgba(42,175,220,0.6)";
		this.ctx.strokeStyle="#14a3d1";
		this.ctx.lineWidth="1";
		//this.ctx.translate(this.canvas.height*0.5,this.canvas.width*0.5);
		
		//console.log(this.x1,this.y1,this.x2,this.y2,this.x3,this.y3);
		var cir_index=[];
		if(this.count==3){
			cir_index=[[this.x1,this.y1],[this.x2,this.y2],[this.x3,this.y3]]
			}else if(this.count==2){
			cir_index=[[this.x1,this.y1],[this.x2,this.y2]]
			}else if(this.count==4){
			cir_index=[[this.x1,this.y1],[this.x2,this.y2],[this.x3,this.y3],[this.x4,this.y4]]
			}else if(this.count==5){
			cir_index=[[this.x1,this.y1],[this.x2,this.y2],[this.x3,this.y3],[this.x4,this.y4],[this.x5,this.y5]]
			}
		//console.log(cir_index);
		
		for(var i=0;i<this.count;i++){
			//console.log(this.x+""+(i+1));
			
			if(i==this.count-1){
				var long_x = Math.pow(cir_index[i][0]-cir_index[0][0],2);
				var long_y = Math.pow(cir_index[i][1]-cir_index[0][1],2);
				if(Math.pow(long_x+long_y,1/2)<120){
					this.ctx.beginPath();
					this.ctx.moveTo(cir_index[i][0],cir_index[i][1]);
					this.ctx.lineTo(cir_index[0][0],cir_index[0][1]);
					this.ctx.stroke();
					this.ctx.closePath();
					}
				}
			else{
				var long_x = Math.pow(cir_index[i][0]-cir_index[i+1][0],2);
				var long_y = Math.pow(cir_index[i][1]-cir_index[i+1][1],2);
				if(Math.pow(long_x+long_y,1/2)<120){
					this.ctx.beginPath();
					this.ctx.moveTo(cir_index[i][0],cir_index[i][1]);
					this.ctx.lineTo(cir_index[i+1][0],cir_index[i+1][1]);
					this.ctx.stroke();
					this.ctx.closePath();
					}
				}
			}
		
		if(this.count>=2){
			this.ctx.beginPath();
			this.ctx.arc(this.x1,this.y1,4,0,Math.PI*2,false);
			this.ctx.fill();
			this.ctx.closePath();
			this.ctx.beginPath();
			this.ctx.arc(this.x2,this.y2,4,0,Math.PI*2,false);
			this.ctx.fill();
			this.ctx.closePath();
		}
		if(this.count>=3){
			this.ctx.beginPath();
			this.ctx.arc(this.x3,this.y3,4,0,Math.PI*2,false);
			this.ctx.fill();
			this.ctx.closePath();
		}
		if(this.count>=4){
			this.ctx.beginPath();
			this.ctx.arc(this.x4,this.y4,4,0,Math.PI*2,false);
			this.ctx.fill();
			this.ctx.closePath();
		}
		if(this.count>=5){
			this.ctx.beginPath();
			this.ctx.arc(this.x5,this.y5,4,0,Math.PI*2,false);
			this.ctx.fill();
			this.ctx.closePath();
		}
		},
	
	
	//-------------------------------------------------------------------第二个点
	
	
	stratpos4:function(){
		this.ranx = Math.random();
		this.rany = Math.random();
		var posX,posY;
		//console.log(this.ranx);
			posX=Math.floor(95+this.ranx*20);
			posY=Math.floor(this.rany*30+15);
			
		this.pos4={
			"x":posX,
			"y":posY
			}
		},
	
	
	stratpos5:function(){
		this.ranx = Math.random();
		this.rany = Math.random();
		var posX,posY;
			posX=Math.floor(45+this.ranx*20);
			posY=Math.floor(this.rany*30+60);
			
		this.pos5={
			"x":posX,
			"y":posY
			}
		},
	
	
	stratpos2:function(){
		this.ranx = Math.random();
		this.rany = Math.random();
		var posX,posY;
		//console.log(this.ranx);
			posX=Math.floor(50-this.ranx*20);
			posY=Math.floor(this.rany*30+105);
			
		this.pos2={
			"x":posX,
			"y":posY
			}
		},
	
	//
//	equation2:function(){
//		this.stratpos2();
//		this.y2=this.pos2.y;
//		this.x2=this.pos2.x;
//		this.params=[1,2];
//		var _this=this;
//		setInterval(function(){
//			_this.animationcircle2(_this);
//			},this.delay);
//		},
	//animationcircle2:function(_this){
//		_this.drawcircle2();
//		if(_this.x2-_this.pos2.x>15){
//			_this.y2=2*_this.x2+(_this.pos2.y-_this.pos2.x*2);
//			_this.x2=_this.x2-0.05;
//			_this.flag=false;
//			}else if(_this.x2-_this.pos2.x<-15){
//				_this.y2=2*_this.x2+(_this.pos2.y-_this.pos2.x*2);
//				_this.x2=_this.x2+0.05;
//				_this.flag=true;
//				}else{
//					if(_this.flag){
//						_this.y2=2*_this.x2+(_this.pos2.y-_this.pos2.x*2);
//						_this.x2=_this.x2+0.05;
//						}
//					else if(!_this.flag){
//						_this.y2=2*_this.x2+(_this.pos2.y-_this.pos2.x*2);
//						_this.x2=_this.x2-0.05;
//						}
//					}
//			
//			//console.log(_this.x2+"-----"+_this.y2)
//		},
		
	//------------------------------------------------画圆
//	drawcircle2:function(){
//		//this.canvas=this.createElem("canvas",{style:"position:absolute; left:0; top:0;"});
		this.canvas.height=this.canvas_height;
		this.canvas.width=this.canvas_width;
		this.parentnode.appendChild(this.canvas);
		this.ctx=this.canvas.getContext("2d");
		this.ctx.fillStyle="rgba(44,177,223,0.6)";
		this.ctx.translate(this.canvas.height*0.5,this.canvas.width*0.5)
//		this.ctx.beginPath()
//		this.ctx.arc(this.x2,this.y2,4,0,Math.PI*2,false)
//		this.ctx.fill();
//		this.ctx.closePath();
//		},
	
	stratpos3:function(){
		this.ranx = Math.random();
		this.rany = Math.random();
		var posX,posY;
		posX=Math.floor(this.ranx*20+105);
		posY=Math.floor(this.rany*20+105);
		this.pos3={
			"x":posX,
			"y":posY
			}
		},
	
	//
//	equation3:function(){
//		this.stratpos3();
//		this.y3=this.pos3.y;
//		this.x3=this.pos3.x;
//		this.params=[1,2];
//		var _this=this;
//		setInterval(function(){
//			_this.animationcircle3(_this);
//			},this.delay);
//		},
//	animationcircle3:function(_this){
//		_this.drawcircle3();
//		if(_this.x3-_this.pos3.x>20){
//			_this.y3=3*_this.x3+(_this.pos3.y-_this.pos3.x*3);
//			_this.x1=_this.x3-0.05;
//			_this.flag=false;
//			}else if(_this.x3-_this.pos3.x<-20){
//				_this.y3=3*_this.x3+(_this.pos3.y-_this.pos3.x*3);
//				_this.x3=_this.x3+0.05;
//				_this.flag=true;
//				}else{
//					if(_this.flag){
//						_this.y3=3*_this.x3+(_this.pos3.y-_this.pos3.x*3);
//						_this.x3=_this.x3+0.05;
//						}
//					else if(!_this.flag){
//						_this.y3=3*_this.x3+(_this.pos3.y-_this.pos3.x*3);
//						_this.x3=_this.x3-0.05;
//						}
//					}
//			
//			//console.log(_this.x3+"-----"+_this.y3)
//		},
	//------------------------------------------------画圆
	//drawcircle3:function(){
//		//this.canvas=this.createElem("canvas",{style:"position:absolute; left:0; top:0;"});
		this.canvas.height=this.canvas_height;
		this.canvas.width=this.canvas_width;
		this.parentnode.appendChild(this.canvas);
		this.ctx=this.canvas.getContext("2d");
		this.ctx.fillStyle="rgba(44,177,223,0.6)";
		this.ctx.translate(this.canvas.height*0.5,this.canvas.width*0.5)
//		this.ctx.beginPath()
//		this.ctx.arc(this.x3,this.y3,4,0,Math.PI*2,false)
//		this.ctx.fill();
//		this.ctx.closePath();
//		this.drawline();
//		},
//	
//	drawline:function(){
//		this.ctx.strokeStyle="#14a3d1";
//		this.ctx.lineWidth="1";
//		this.ctx.beginPath();
//		this.ctx.moveTo(this.x1,this.y1);
//		this.ctx.lineTo(this.x2,this.y2);
//		this.ctx.lineTo(this.x3,this.y3);
//		this.ctx.lineTo(this.x1,this.y1);
//		this.ctx.stroke();
//		this.ctx.closePath();
//		}
	
	};

这些注释的代码是之前走的弯路，之前想的太复杂了，后来精简以后的代码就是现在的这样的，大神们请多多指教，如果又能用到的地方或者是能帮助您的地方，万分荣幸。谢谢查看此博客。

davechan_528
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标真随机连点器
05-31
可设置毫秒，可用于网络游戏随机强化装备等
Canvas学习记录之arc
万少博-FE
03-14 1106
最新更新时间：2020年03月14日00:58:55 《猛戳-查看我的博客地图-总有你意想不到的惊喜》 本文内容：本文介绍基于arc()绘制圆弧路径的一些基本用法，圆弧、圆形、环形、球形、扇形、饼状图 创建二维渲染上下文 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); arc...
html5 canvas 倒计时,canvas环形倒计时组件的示例代码
weixin_42401356的博客
06-29 344
本文介绍了canvas环形倒计时组件的示例代码，分享给大家，具体如下：效果如下图一：Canvas环形倒计时组件Canvas环形倒计时是基于Canvas实现的倒计时，建议于移动端使用一、如何使用1. html代码ID属性可随意取名2. 引入process.js文件页面引用3. 初始化参数实例化即可window.onload = function () {let ctd = new Countdown...
VUE+Canvas 实现桌面弹球消砖块小游戏
denglouhen的博客
04-07 6116
大家都玩过弹球消砖块游戏，左右键控制最底端的一个小木板平移，接住掉落的小球，将球弹起后消除画面上方的一堆砖块。 那么用VUE+Canvas如何来实现呢？实现思路很简单，首先来拆分一下要画在画布上的内容： （1）用键盘左右按键控制平移的木板； （2）在画布内四处弹跳的小球； （3）固定在画面上方，并且被球碰撞后就消失的一堆砖块。 将上述三种对象，用requestAnimationFrame()函数平移运动起来，再结合各种碰撞检查，就可以得到最终的结果。 先看看最终的效果： 一、左右平移的木板
4-掌握JavaScript数学函数Math常用的方法
qq_35895679的博客
05-15 184
Math称为数学函数，但是它属于对象类型的 typeof Math;//'object' 之所以叫数学函数，是因为Math这个对象中提供了很多操作数字的方法 console.dir(Math);//Math 是一个对象，有很多属性和方法 /* 控制台打印： Math={ //属性 E: 2.718281828459045 LN10: 2.302585092994046 LN2: 0.6931471805599453 LOG10E: 0.4342944819032518 LOG2E: 1.44269
基于随机梯度的变动量因子自适应白化算法
02-24
针对自适应白化技术中算法的收敛速度问题,通过融入具有变动量因子特性的动量项,提出了一种快速的自适应白化算法.该算法利用动量项来加速系统的收敛速度,并基于随机梯度方法对动量因子进行自适应更新,有效提升了白化...
基础资产价格的变动随机微分方程.pptx
10-14
基础资产价格的变动随机微分方程.pptx
易语言颜色随机渐变
07-23
易语言颜色随机渐变源码,颜色随机渐变,a渐变,b渐变,c渐变
随机信号学习包
05-20
随机信号是不能用确定的数学关系式来描述的，不能预测其未来任何瞬时值，任何一次观测只代表其在变动范围中可能产生的结果之一，其值的变动服从统计规律。它不是时间的确定函数，其在定义域内的任意时刻没有确定的函...
【转载】理解Math.floor(Math.random() * (max - min + 1)) + min
kuyitora的博客
01-05 155
转载自https://teamtreehouse.com/community/mathfloor-mathrandom-max-min-1-min-explanation Jason Anello on Nov 11, 2016 Hi Chelsea, Maybe it will help to see how the formula can be derived starting only with Math.random() and Math.floor(). That way you’ll know
关于__Federico Milano 的电力系统分析工具箱.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
mlab-upenn 研究小组的心脏模型模拟.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
混合图像创建大师matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
中序遍历二叉树-java版本
04-26
在Java中，实现二叉树的中序遍历同样可以通过递归来完成。中序遍历的顺序是：首先递归地中序遍历左子树，然后访问根节点，最后递归地中序遍历右子树。 在这段代码中，Node类定义了二叉树的节点，BinaryTree类包含一个指向根节点的指针和inOrder方法，用于递归地进行中序遍历。printInOrder方法调用inOrder方法并打印出遍历的结果。 在Main类中，我们创建了一个示例二叉树，并调用printInOrder方法来输出中序遍历的结果。输出应该是：4 2 5 1 3，这表示中序遍历的顺序是左子树（4），然后是根节点（2），接着是右子树的左子树（5），然后是右子树的根节点（1），最后是右子树的右子树（3）。
无头单向非循环链表的实现（SList.c）
最新发布
04-26
无头单向非循环链表的实现（函数定义文件）
两个有序链表的合并pta
04-26
"PTA" 通常指的是一种在线编程平台，例如“Pata”或者某些特定学校或组织的编程练习与自动评测系统。在这种平台或系统中，学生或程序员会提交代码来解决各种问题，然后系统会自动运行并评测这些代码的正确性。 当提到“两个有序链表的合并PTA”时，这通常意味着在PTA平台上解决一个特定的问题，即合并两个有序链表。具体任务可能是给定两个已按升序排序的链表，要求编写代码来合并这两个链表，形成一个新的有序链表。
在 Matlab 中创建的图形工具可改善航空航天数据的可视化.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
搜索引擎的设计与实现.zip
04-26
搜索引擎的设计与实现
随机过程ross微盘
09-24
随机过程ROSS微盘是一种分析金融市场的数学工具。它是随机过程理论的一个重要...总之，随机过程ROSS微盘是一种应用于金融领域的数学工具，它能够描述金融资产价格的随机变动，并为金融市场的分析和预测提供统计学基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值