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


Posted in Javascript onNovember 01, 2019

本文实例为大家分享了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>

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

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
微信小程序定义和调用全局变量globalData的实现
Nov 01 #Javascript
vue-router 中 meta的用法详解
Nov 01 #Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 #Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 #Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 #Javascript
vue设置动态请求地址的例子
Nov 01 #Javascript
You might like
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
Yii2如何批量添加数据
2016/05/17 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
js实现数字滚动特效
2019/12/16 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Python构建XML树结构的方法示例
2017/06/30 Python
python如何实现内容写在图片上
2018/03/23 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
无工作经验者个人求职信范文
2013/12/22 职场文书
全陪导游欢迎词
2014/01/17 职场文书
加工操作管理制度
2014/01/19 职场文书
运动会通讯稿150字
2014/02/15 职场文书
教师求职信范文
2014/05/24 职场文书
大学生个人求职信例文
2014/07/07 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
nginx请求限制配置方法
2021/07/09 Servers