关闭

WebUI学习

225人阅读 评论(0) 收藏 举报
分类:
</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>






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2771次
    • 积分:171
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:1篇
    • 译文:0篇
    • 评论:2条
    文章分类
    文章存档
    最新评论