浏览器支持:ie9,firefox,chrome
效果图:
源码分享:
</head></p>
<p> <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;</p>
<p> a.font = "bold 200pt arial";
a.fillstyle = "rgb(255,255,255)";
a.filltext(inputname, 50, 300);
var px = [];</p>
<p> 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] );
}
}
}</p>
<p> 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++;</p>
<p> }
};
};
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 );
}
}</p>
<p> // grow actuals tendrils
if(tt.length > 0)
{
for(t in tt)
{
tt[t].grow(1.0, 1.0, 0.02);
}
}</p>
<p> }
</p>
<p> 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>
ffcod = delpost.runcode1 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode1 .value = ffcod; 提示:您可以先修改部分代码再运行