[JS,NodeJs]个人网站效果代码集合

上次发的个人网站效果代码集合：

代码集合：

1.彩色文字墙[鼠标涟漪痕迹]

2.彩色旋转圆环

[模仿http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/中间部分效果，

那个走路的孩子技术很简单，和以前的春分秋分Google的Doodles类似，就没有模仿，换成一个头像]

3.视屏拼图

4.百度地图api简单应用集合

5.财经数据

6.天气预报

[nodejs搭建,exPRess框架,nodejs简单页面抓取,JS正则,canvas光晕效果]

7.打字效果

8.自动换色彩色文字

---

上次个人主页的截图：[服务器网速慢，加载耗些时间；尚未做做浏览器判断和浏览器大小变化后的自适应]

主页地址：wangxinsheng.herokuapp.com

[主页：彩色文字墙，彩色旋转圆环]

[财经数据，之前是通过服务器去请求数据，现在直接由客户端请求数据]

[天气预报：PM2.5已经更新过，先看中国天气网的数据，没有在抓取美国大使馆的数据。尚未做地理判断和其他天气Canvas效果，只有光晕效果]

[简单打字效果]

[单html页面]

[百度地图api简单应用集合]

[视屏拼图：自己做的，canvas和video以及JS的集合效果]

[动态彩色文字]

---

单该能示例代码：

1.彩色文字墙[鼠标涟漪痕迹]：

js:

  1 var bgCanvas;  2 $(function(){  3     var bgCanvas = new bgC();  4     bgCanvas.init(function(){  5         bgCanvas.doAnimate(bgCanvas);  6     });  7 });  8 function bgC(){  9     this.textArr = ["对象","java","C#","asp.net","php","NODEJS","C","Python","Socket","RESTful","VBA","JavaScript","JQuery","GSAP","ExtJs","WebApp","Android","HTML5","CSS2","CSS3","SqlServer","Oracle","MySQL","SQLite","MongoDB","Struts","Spring","SSH","Seasar2","AOP","IoC","闭包","反射","代理"], 10     this.colorArr = [ 11         {"fill":"rgba(255,0,0,0.1)","stroke":"rgba(0,0,255,0.3)"}, 12         {"fill":"rgba(255,0,0,0.1)","stroke":"rgba(0,0,255,0.3)"}, 13         {"fill":"rgba(0,0,255,0.1)","stroke":"rgba(255,0,0,0.3)"}, 14         {"fill":"rgba(232,193,254,0.1)","stroke":"rgba(162,0,255,0.3)"}, 15         {"fill":"rgba(254,199,121,0.1)","stroke":"rgba(255,150,0,0.3)"}, 16         {"fill":"rgba(0,156,143,0.1)","stroke":"rgba(0,255,243,0.3)"}, 17         {"fill":"rgba(216,136,108,0.1)","stroke":"rgba(255,66,0,0.3)"}, 18 {"fill":"rgba(0,255,0,0.2)","stroke":"rgba(255,0,0,0.3)"} 19     ], 20     this.parent = "body"//"#outDiv", 21     this.me; 22     this.docH = 0, 23     this.docW = 0, 24     this.drawTop = -20, 25     this.drawLeft = -100, 26     this.maxLines=3, 27     this.lineH=0, 28     this.showLines=5, 29     this.cObj, //screen canvas 30     this.cC, //screen Context 31     this.cbObj, //back canvas 32     this.cbC, //back Context 33     this.circles = new Array(), 34     this.bigger = 1, 35     this.outter = 0.008, 36     this.lastFpsUpdateTime=new Date, 37     this.init = function(doAnimate){ 38         this.me = this; 39         // single line height 40         this.docW = $(document).width(); 41         this.docH = $(document).height(); 42         // patten 1 43         //this.lineH = this.docH/this.showLines; 44         // patten 2 45         this.lineH = 150; 46         this.showLines = Math.ceil(this.docH/this.lineH); 47  48         //append mouse DOM canvas 49         $(this.parent).prepend($("<canvas id='cbObj' width="+this.docW+" height="+this.docH+"></canvas>").css({"display":"block","left":"0px","top":"0px"})); 50         // append screen DOM canvas 51         $(this.parent).prepend($("<canvas id='cObj' width="+this.docW+" height="+this.docH+"></canvas>").css({"position":"absolute","left":"0px","top":"0px"})); 52         // get canvas and context 53         this.cObj = document.getElementById('cObj'); 54         this.cC = cObj.getContext('2d'); 55         this.cbObj = document.getElementById('cbObj'); 56         this.cbC = cbObj.getContext('2d'); 57  58         //draw texts 59         this.drawTexts(); 60  61         // onmousemove bound 62         this.Bind($(document), "mousemove", this.doMM, this); 63  64         // simple animation 65         //setInterval(this.doAnimate,500); 66         setInterval(doAnimate,10); 67     }, 68     this.drawTexts = function(){ 69         var maxLinesH = 0; 70         var maxLinesW = 0; 71         while(this.drawTop<this.docH){ 72             maxLinesH = this.lineH; 73             while(this.drawLeft < this.docW){ 74                 // random lines 75                 linesAll =  Math.round(Math.random()*(this.maxLines-1)+1); 76                 // calc lines 77                 var lines = new Array(); 78                 var oneLineH = this.lineH / linesAll; 79                 for(i=0;i<linesAll;i++){ 80                     // random text 81                     textI = Math.round(Math.random()*(this.textArr.length-1)); 82                     colorI = Math.round(Math.random()*(this.colorArr.length-1)); 83  84                     // calc max line width 85                     textMetrics = this.cC.measureText(this.textArr[textI]); 86                     maxLinesW = textMetrics.width>maxLinesW?textMetrics.width:maxLinesW; 87                     //console.log(textMetrics); 88  89                     // calc top and left 90                     lineTop = this.drawTop + (i+0.5) * oneLineH; 91  92                     // store information 93                     lines.push({"text":this.textArr[textI],"color":this.colorArr[colorI],"top":lineTop,"font":Math.floor(oneLineH/(Math.random()*1.5+1))}); 94                 } 95                 left = this.drawLeft + maxLinesW * 0.5; 96                 this.drawText(lines,left); 97                 this.drawLeft += maxLinesW; 98             } 99             this.drawLeft = 0;100             this.drawTop += maxLinesH;101             //console.log(this.drawTop);102         }103     },104     this.drawText = function(lines,left){105         //console.log(lines,left);106         for(i=0;i<lines.length;i++){107             this.cC.save();108             //console.log(textI);109 110             this.cC.font=lines[i].font+"px Georgia";111             this.cC.textBaseline = 'middle';//设置文本的垂直对齐方式112             this.cC.textAlign = 'center'; //设置文本的水平对对齐方式113             this.cC.fillStyle = lines[i].color.fill;114             this.cC.strokeStyle = lines[i].color.stroke;115             this.cC.fillText(lines[i].text, left,lines[i].top);116             this.cC.strokeText(lines[i].text, left,lines[i].top);117 118             this.cC.restore();119         }120     },121     this.doMM = function(e){122         this.circles.push(123         {124             'x':e.pageX,125             'y':e.pageY,126             'colorR':Math.floor(Math.random()*255),127             'colorG':Math.floor(Math.random()*255),128             'colorB':Math.floor(Math.random()*255),129             'a':0.5,130             'r':1131         });132         this.doAnimate(this);133         //console.log(this.circles);134     },135     this.doAnimate = function(thisObj){136         137         thisObj.cbC.clearRect(0,0,thisObj.docW,thisObj.docH);138         thisObj.cbC.save();139         var delArr = new Array();140         for(i=0;i<thisObj.circles.length;i++){141             thisObj.circles[i].a -= thisObj.outter;142             thisObj.circles[i].r += thisObj.bigger;143             thisObj.cbC.fillStyle = "rgba("+thisObj.circles[i].colorR+","+thisObj.circles[i].colorG+","+thisObj.circles[i].colorB+","+thisObj.circles[i].a+")";144             145             thisObj.cbC.beginPath();146             thisObj.cbC.arc(thisObj.circles[i].x,thisObj.circles[i].y,thisObj.circles[i].r,0,Math.PI*2,true);147             thisObj.cbC.closePath();148             thisObj.cbC.fill();149             if(thisObj.circles[i].a<0.05){150                 delArr.push