web學習(1)--粒子發生器(web入門)

Sly_461發表於2016-09-18
Web

          博主也是剛剛開始學習web網頁製作，先推薦一個學習web的好地方http://www.w3school.com.cn，裡面HTML,CSS,JavaScript都有詳細的教程。

      先上一個效果圖：(這是個動圖，泡泡會往四周擴散)


由於是初學，所以註釋很詳細，上程式碼：

HTML:（注意js檔案的名字和所放位置，如果和我命名的不一樣，注意在第六行修改）

<!DOCTYPE html>          <!--瀏覽器獲知文件型別為HTML5-->
<html>
	<head>
		<meta charset="utf-8" />           <!--編碼格式-->
		<title>粒子發生器</title>
		<script src="js/index.js"></script>    <!--引入js-->   <!--注意js檔案的名字-->
		<style>   /*定義樣式*/
			#cns1{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="cns1" width="500px" height="500px"></canvas>      <!--canvas畫布-->
	</body>
	<script> 
		var Game=new Pupple(document.querySelector("#cns1"));      //獲取CSS選擇器的畫布元素  並new一個粒子發生器的物件出來(即例項化)
	</script>
</html>

JavaScript:

var Model=function(canvas){    //傳參 畫布
	var me=this;
	me.puppleArr=new Array();       //泡泡陣列
	me.puppleNum=100;              //泡泡個數
	me.canvas=canvas;              //獲取畫布元素
	me.context=canvas.getContext('2d');      //獲取用於在畫布上繪圖的環境
	
	
	for(var i=0;i<me.puppleNum;i++){
		me.puppleArr.push(me.genPupple());     //將泡泡屬性新增到陣列
 	}
	me.shake();   //泡泡發射（移動）
}
Model.prototype.genPupple=function(){    //使用 prototype 屬性來向物件新增屬性
	return {            //返回泡泡的各種屬性
		radius:Math.random()*10,//半徑
		v:Math.random()*100, //速度
		r:Math.random()*255|0,      //|0是取整   random()是0~1之間的隨機數
		g:Math.random()*255|0,
		b:Math.random()*255|0,   //r g b 三原色
		a:Math.random(),        //透明度
		angle: Math.PI*Math.random()*2,      //泡泡移動方向    
		x:this.canvas.width/2,          //泡泡位置座標
		y:this.canvas.height/2,
	}
}

Model.prototype.shake=function(){          //使用 prototype 屬性來向物件新增屬性
	var me=this;
	var ctx=me.context;
	foo();     //繪製到畫布上
	function foo(){
		ctx.clearRect(0,0,me.canvas.width,me.canvas.height);   //清空畫布
		for(var i=0;i<me.puppleNum;i++){   
			var o=me.puppleArr[i];
			ctx.fillStyle="rgba("+o.r+","+o.g+","+o.b+","+o.a+")";    //設定繪製顏色及透明度
			ctx.beginPath(); //開始繪製
		    ctx.arc(o.x,o.y,o.radius,0,360,false);    //繪製一個圓
		    ctx.fill();      //填充顏色
		    ctx.closePath();  //結束繪製
		       
		    o.x += (o.v ) * Math.cos(o.angle)*0.03;        //泡泡位置移動
            o.y += (o.v ) * Math.sin(o.angle)*0.03;
            o.a -= 0.01;        //透明度逐漸降低
            if(o.a<=0){              //透明度降低至0時（肉眼看不見了），便重置泡泡的各種屬性
            	me.puppleArr[i]=me.genPupple(); 
            }
        } 
		setTimeout(foo,30);     //每隔30ms繪製一次
	}
}
window.Pupple = Model;


相關文章