使用JS+CSS3技术：让你的名字动起来

程序员文章站 2023-11-19 11:37:46

使用JS+CSS3技术，可以让你的名字在IE9，FireFox，Chrome活跃起来，效果很不错... 13-04-27...

使用技术：js+css3

浏览器支持：ie9，firefox，chrome

效果图：

使用JS+CSS3技术：让你的名字动起来

源码分享：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
 <title> new document </title>
 <meta name="generator" content="editplus">
 <meta name="author" content="">
 <meta name="keywords" content="">
 <meta name="description" content="">
 
 </head>
 <body>
 <canvas id="c" width="1024" height="768"></canvas>
 </body>
 <script>
 var inputname="jb51";//输入你的名字
 var b = document.body;
 var c = document.getelementsbytagname('canvas')[0];
 var a = c.getcontext('2d');
 document.body.clientwidth; 
 c.width = 1024;
 c.height = 768;
 a.font = "bold 200pt arial";
 a.fillstyle = "rgb(255,255,255)"; 
 a.filltext(inputname, 50, 300); 
 var px = [];
 var imgdata=a.getimagedata(0,0,c.width,c.height);
 
 for(x=0; x<imgdata.width; x++)
 {
 for(y=0 ; y<imgdata.height; y++)
 {
 if(getpixel(imgdata,x,y)[3] > 0)
 {
 px.push( [x,y] );
 }
 }
 }
 setinterval(draw, 10);
 var max = 40;
 
 var tt = new array();
 
 function tendril()
 {
 this.init = function(x, y, width)
 { 
 this.x = x;
 this.y = y;
 this.width = width;
 this.angle = math.random()*2*math.pi - math.pi;
 this.v = 0;
 this.length = 0;
 };
 this.grow = function(distance, curl, step) //distance=3.0, curl=1.0, step=0.02
 {
 if(this.length < max)
 {
 this.x += math.cos(this.angle) * distance;
 this.y += math.sin(this.angle) * distance;
 this.v += math.random() * step - step/2;
 this.v *= 0.9 + curl*0.1;
 this.angle += this.v; 
 if(this._x != undefined)
 {
 aa = this.length/max;
 
 r = 8;
 g = parseint(aa * 255);
 b = 32;
 
 a.beginpath();
 a.strokestyle="rgba("+r+","+g+","+b+","+(1-aa)+")";
 a.moveto(this._x,this._y);
 a.lineto(this.x,this.y);
 a.closepath();
 a.stroke();
 
 }
 this._x = this.x;
 this._y = this.y;
 this.length++;
 }
 };
 };
 
 function draw()
 { 
 
 // add new tendrils
 
 for(p in px)
 {
 if(math.random() > 0.9999)
 { 
 var t = new tendril();
 t.init(px[p][0],px[p][1],15); 
 tt.push ( t );
 }
 }
 // grow actuals tendrils
 
 if(tt.length > 0)
 {
 for(t in tt)
 {
 tt[t].grow(1.0, 1.0, 0.02); 
 }
 }
 }
 
 function getpixel(imgdata, x, y) {
 var offset = (x + y * imgdata.width) * 4;
 var r = imgdata.data[offset+0];
 var g = imgdata.data[offset+1];
 var b = imgdata.data[offset+2];
 var a = imgdata.data[offset+3];
 
 return [r,g,b,a];
 } 
 </script>
</html>

提示：您可以先修改部分代码再运行

上一篇：做网站排名技巧万变不离其宗六项小结

下一篇：网站上线后应按照方法做seo推广工作小结