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 相关文章推荐
常用的javascript function代码
May 23 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
JS实现瀑布流布局
Oct 21 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
php基础学习之变量的使用
2011/06/09 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
利用javascript查看html源文件
2006/11/08 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
详解VUE 数组更新
2017/12/16 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python自动抢红包教程详解
2019/06/11 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
python爬取微博评论的实例讲解
2021/01/15 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
综合实践活动方案
2014/02/14 职场文书
房屋租赁意向书
2014/04/01 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
资料员岗位职责
2015/02/10 职场文书
酒店前台岗位职责
2015/04/16 职场文书
公司宣传语大全
2015/07/13 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python