js canvas实现星空连线背景特效

来源:脚本之家  责任编辑:小易  

本文实例为大家分享了js canvas星空连线背景的具体代码,供大家参考,具体内容如下

<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();//结束路径
   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();//结束路径
   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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:


  • 本文相关:
  • js实现旋转的星空效果
  • js实现漂亮的星空背景
  • js实现动态星空背景效果
  • js+canvas画布实现炫酷的旋转星空效果示例
  • 使用3d引擎threejs实现星空粒子移动效果
  • js实现宇宙星空背景效果的方法
  • js星空效果代码
  • layui动态加载多表头的实例
  • document.write()及其输出内容的样式、位置控制
  • 深入理解javascript函数参数与闭包
  • javascript无缝滚动效果的实例代码
  • js实现坦克移动小游戏
  • javascript 封装date日期类实例详解
  • 英文首字母全大写的js实现脚本
  • javascript 更新 javascript 数组的 uniq 方法
  • js简单工厂模式用法实例
  • js将滑动门改为选项卡(需鼠标点击)的实现方法
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved