使用技术:JS+CSS3
浏览器支持: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>










