WebUI学习

原创 2016年08月31日 15:30:05
</pre>第一次代码<p></p><p></p><p>js</p><p><pre name="code" class="javascript">(function(){
	var Model=function(canvas){
		var me=this;
		me.canvas=canvas;
		me.context=canvas.getContext('2d');
		me.puppleArr=[];
		me.puppleNum=500;
		for(var i=0;i<me.puppleNum;i++){
			me.puppleArr.push(me.genPupple());
		}
		me.draw();
	}
	
	/**
	 * 绘制泡泡
	 */
	Model.prototype.draw=function(){
		var me=this;
		foo();
		function foo(){
			me.context.clearRect(0,0,me.canvas.width,me.canvas.height);
			for(var i=0;i<me.puppleNum;i++){
				var o=me.puppleArr[i];
				me.context.fillStyle='rgba('+o.r+','+o.g+','+o.b+','+o.a+')';
				me.context.beginPath();
				me.context.arc(o.x,o.y,o.radius,0,360,false);
				me.context.fill();
				me.context.closePath();
				
				//改变x y
				o.x+=o.v*0.03*Math.cos(o.angle);
				o.y+=o.v*0.03*Math.sin(o.angle);
				
				//改变透明度  大于等于 则产生新的泡泡
				o.a+=0.01;
				if(o.a>=1){
					me.puppleArr[i]=me.genPupple();
				}
			}
			setTimeout(foo,30);
		}
	}
	
	/**
	 * 产生泡泡
	 */
	Model.prototype.genPupple=function(){
		return {
			//半径
			radius:( (Math.random()*10) | 0)||1,
			//红
			r:Math.random()*256|0,
			//绿
			g:Math.random()*256|0,
			//蓝
			b:Math.random()*256|0,
			//透明度
			a:Math.random(),
			//x坐标
			x:this.canvas.width/2,
			//y坐标
			y:this.canvas.height/2,
			//速度
			v:Math.random()*100,
			//运动方向角
			angle:Math.random()*2*Math.PI
		}
	}
	window.Pupple=Model;
}());



html


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/index.js" ></script>
	</head>
	<body>
		<canvas width='500' height='500'></canvas>
	</body>
	<script>
		new Pupple(document.querySelector('canvas'));
	</script>
</html>


第二周学习代码


先见一个目录2,再在目录2里面建一个目录js ,目录js里面再建一个javascript文件  index.js   ,目录2里面再建一个html文件  index.html


index.js代码

(function(){
	var Model=function(canvas){
		var me=this;
		
		me.canvas=canvas;
		me.context=canvas.getContext('2d');
		me.blockArr=[];
		me.drawGrid();
		me.drawBlock();
	}
	
	/**
	 * 绘制网格
	 */
	Model.prototype.drawGrid = function(){
		var me=this;
		var ctx=me.context;
		var width=me.canvas.width/4;
		var height=me.canvas.height/6;
		//绘制横线
		ctx.fillStyle="#000000";
		for(var i=0;i<5;i++){
			var y=(i+1)*height;
			ctx.beginPath();
			ctx.moveTo(0,y);
			ctx.lineTo(me.canvas.width,y);
			ctx.stroke();
			ctx.closePath();
		}
		for(var i=0;i<3;i++){
			var x=(i+1)*width;
			ctx.beginPath();
			ctx.moveTo(x,0);
			ctx.lineTo(x,me.canvas.height);
			ctx.stroke();
			ctx.closePath();
		}
	}
	
	/**
	 * 绘制黑块
	 */
	Model.prototype.drawBlock=function(){
		var me=this;
		var ctx=me.context;
		var width=me.canvas.width/4;
		var height=me.canvas.height/6;
		ctx.fillStyle="#000000";
		for(var i=0;i<6;i++){
			var y=i*height;
			//列索引
			var index=(Math.random()*4)|0;
			//列索引存储在数组中
			me.blockArr[i]=index;
			var x=index*width;
			ctx.fillRect(x,y,width,height);	
		}
		
	}
	
	/**
	 *判断是否为黑块 
	 */
	/*
	Model.prototype.checkBlock()=function(x,y){
		var me=this;
		var width=me.canvas.width/4;
		var height=me.canvas.height/6;
		var col=(x/width)|0;
		var row=(y/height)|0;
		return me.blockArr[row]===col; 
	}
	*/
	//暴露model
	window.WhiteBlock=Model;
}());



index.html代码   


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/index.js" ></script>
	</head>
	<body>
		<canvas width="400" height="600" style="border:1px solid #000000;"></canvas>
	</body>

	<script>
		new WhiteBlock(document.querySelector('canvas'));	
	</script>
</html>






版权声明:本文为博主原创文章,未经博主允许不得转载。

webUI学习的标签整理

  • 2016年09月13日 19:17
  • 174KB
  • 下载

JMeter学习笔记12-如何录制WebUI脚本

本文要讨论的不是JMeter里面那个录制模板的功能,是借助Badboy录制WebUI脚本,然后在Badboy的导出.jmx格式,然后用JMeter去打开这个脚本,进行相关的性能测试。 1. 下载和安...

在树莓派 上 搭建 aria2+webui 实现远程下载

在树莓派 上 搭建 aria2+webui 实现远程下载写在前面  想法来自把树莓派变成24小时运行的下载神器(种子、磁力链通通支持)   由于我是在学校用的是校园wifi,连wifi的树...

WebUI 自动化测试利器 - selenium

1.什么是selenium Selenium是ThroughtWorks公司一个强大的开源Web功能测试工具系列,本系列现在主要包括以下4款: 1.Selenium Core:支持DHTML的测试...

CRM WebUI快键键一览~

F2 这个是最常用的快键键,用来显示各种技术信息,类似Gui里面的F1 F6 使页面变成HTML打印预览样式 CTRL + SHIFT + F7 打开CRM WebUI性能追踪 CTRL + S...

『Spring.NET+NHibernate+泛型』框架搭建之WebUI(五)★

前面的章节讲解了搭建Model、DAO、BLL,完成了前面这三大块框架的搭建,基本上我们开发一个项目只剩下,也只需要写写WebUI层就行了。...

生产环境实战spark (8)分布式集群 Hadoop集群WEBUI打不开问题解决,关闭防火墙firewall

生产环境实战spark (8)分布式集群  Hadoop集群WEBUI打不开问题解决在上一步中安装了Hadoop集群,发现127.0.0.1:50070 页面无法打开。1,master本地检查webu...

phoenixframe自动化测试平台webUI用例实例

package org.phoenix.cases.lianmeng; import java.util.LinkedList; import org.phoenix.action.WebElem...

无缝集成统一的控件系统来开发各种网络应用程序WebUI Studio.NET

WebUI Studio.NET是一套开发web应用程序必不可少的控件。本产品能在产品之间无缝集成统一的控件系统来开发各种网络应用程序。这样一来,就可以通过减少了解产品所需的时间来大大提高生产力,同时...

生产环境实战spark (10)分布式集群 5台设备 SPARK集群 HistoryServer WEBUI不能打开问题解决 File file:/tmp/spark-events does not

生产环境实战spark (10)分布式集群 5台设备 SPARK集群 HistoryServer WEBUI不能打开问题解决这个是个老问题,之前也遇到过,启动start-history-server....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebUI学习
举报原因:
原因补充:

(最多只允许输入30个字)