主页 / 网络编程 /

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

网络编程 2021-07-04 15:01www.168986.cn编程入门
这篇文章主要为大家详细介绍了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.PI2,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.addColorS(0,"yellow");
 color.addColorS(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)
 <=5050){
 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：详解小程序如何改变onLoad的执行时机 下一篇：jQuery鼠标滑过横向时间轴样式(代码详解)

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by