WebUI学习


</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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值