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 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
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
第七节--类的静态成员
2006/11/16 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
老生常谈python之鸭子类和多态
2017/06/13 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python3.5安装python3-tk详解
2019/04/26 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
XML文档面试题
2015/08/05 面试题
酒吧副总经理岗位职责
2013/12/10 职场文书
库房主管岗位职责
2013/12/31 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
机关工会工作总结2015
2015/05/26 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python