快捷導(dǎo)航

js canvas實現(xiàn)星空連線背景特效

更新時間：2019年11月01日 14:14:54 作者：風(fēng)無意

這篇文章主要為大家詳細介紹了js canvas實現(xiàn)星空連線背景特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js canvas星空連線背景的具體代碼，供大家參考，具體內(nèi)容如下

<html>
 <head>
 <meta charset="UTF-8">
 <title>canvas星空連線背景特效</title>
 <style type="text/css">
 body{
 margin: 0;
 }
 #canvas{
 display: block;
 background: #000;
 margin: 0 auto;
 }
 </style>
 </head>
 <body>
 <canvas id="canvas"></canvas>
 <script>
 function Starry(){
 this.cxt=canvas.getContext("2d");
 canvas.width=window.innerWidth;
 canvas.height=window.innerHeight;
 this.cW=canvas.width;
 this.cH=canvas.height;
 this.num=200;
 this.data=[];
 }
 Starry.prototype={
 init: function(){
 for (var i=0;i<this.num;i++) {
 this.data[i]={
 x:Math.random()*this.cW,
 y:Math.random()*this.cH,
 cX:Math.random()*0.6-0.3,
 cY:Math.random()*0.6-0.3
 };
 this.drawCircle(this.data[i].x,this.data[i].y);
 }
 
 },
 drawCircle: function(x,y){
 var cxt=canvas.getContext("2d");
 cxt.save();//保存路徑
 cxt.fillStyle="pink";
 cxt.beginPath();//開始路徑
 cxt.arc(x,y,1,0,Math.PI*2,false);
 cxt.closePath();//結(jié)束路徑
 cxt.fill();//填充方法
 cxt.restore();//釋放路徑
 },
 drawLine: function(x1,y1,x2,y2){
 var cxt=this.cxt;
 var color=cxt.createLinearGradient(x1,y1,x2,y2);
 color.addColorStop(0,"yellow");
 color.addColorStop(1,"green");
 cxt.save();
 cxt.strokeStyle=color;
 cxt.beginPath();//開始路徑
 cxt.moveTo(x1,y1);
 cxt.lineTo(x2,y2);
 cxt.closePath();//結(jié)束路徑
 cxt.stroke();//填充方法
 cxt.restore();//釋放路徑
 
 },
 moveCircle: function(){
 var self=this;
 self.cxt.clearRect(0,0,self.cW,self.cH);
 for(var i=0;i<self.num;i++){
 self.data[i].x+=self.data[i].cX;
 self.data[i].y+=self.data[i].cY;
 if(self.data[i].x>self.cW||self.data[i].x<0){
 self.data[i].cX=-self.data[i].cX;
 }
 if(self.data[i].x>self.cH||self.data[i].y<0){
 self.data[i].cY=-self.data[i].cY;
 }
 this.drawCircle(self.data[i].x,self.data[i].y);
 for(var j=i+1;j<self.num;j++){
 if(Math.pow(self.data[i].x-self.data[j].x,2)
 +Math.pow(self.data[i].y-self.data[j].y,2)
 <=50*50){
 self.drawLine(self.data[i].x,self.data[i].y,
 self.data[j].x,self.data[j].y);
 }
 }
 }
 }
 }
 var starry=new Starry();
 starry.init();
 setInterval(function(){starry.moveCircle();},1);
 </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: