canvas星空连线背景特效

<!DOCTYPE html>
<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>

canvas星空连线背景特效相关推荐

canvas星空连线背景
<!doctype html> <html lang=en> <head><meta charset="utf-8" /><t ...
canvas实现蜘蛛网动态背景特效
先上效果再说废话(滑稽) https://jc1144096387.github.io/canvas_nest/ 第一次看到这个特效时顿时惊为天人,默默地玩了几分钟= =,可惜那个网站只有压缩后的代码 ...
html5页面特效网,HTML5 Canvas打造超梦幻网页背景特效
这是一款使用javascript和HTML5 Canvas来制作的超梦幻网页背景特效.该网页背景特效使用两个canvas元素进行重叠,制作出圆形光影运动的梦幻效果,非常的炫酷. 使用方法 HTML结构 ...
几种炫酷的canvas动态背景特效
canvas光斑闪烁动态背景特效立即下载在线预览 canvas科技感粒子特效,html5科幻粒子动画代码,js鼠标跟随. 立即下载在线预览 htm5圆圈线条连接动画网页背 ...
html5粒子形成图案,html5 canvas粒子形成下雪背景的效果
本篇文章给大家带来的内容是关于html5 canvas粒子形成下雪背景的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. canvas粒子形成下雪背景 body{ margin: ...
html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构该旋转银河系星空背景特效的HTML结果只需 ...
html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
html5 星空扩散效果,HTML5 canvas实现炫酷旋转银河系星空背景特效解析
简要教程这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构该旋转银河系星空背景特效的HTM ...
php+js+背景特效,基于canvas+html5炫酷星空背景动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: Warp drive是一个轻量级的jQuery插件.可以帮助您创建一个很酷的交互式星空背景特效,这个星空背景特效可 ...

canvas星空连线背景特效

canvas星空连线背景特效相关推荐

最新文章

热门文章