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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
JS实现图片切换效果
Nov 17 Javascript
微信小程序如何使用云开发
May 17 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
js实现缓动动画
Nov 25 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP 实现链式操作
2021/03/09 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
javascript 播放器 控制
2007/01/22 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
javascript回调函数详解
2018/02/06 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
浅谈React高阶组件
2018/03/28 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
javascript实现时钟动画
2020/12/03 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
python实现员工管理系统
2018/01/11 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
工作表现评语
2014/01/19 职场文书
保护环境建议书
2014/03/12 职场文书
离婚起诉书范本
2015/05/18 职场文书
大学生支教感言
2015/08/01 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技