看下你名字炫不炫（CSS3)---知道动哦 -

guoxuepeng

浏览: 38598 次

最近访客更多访客>>

shenyouhai

xj273776707

xingfudeshi

fantadust

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (93)

社区版块

存档分类

看下你名字炫不炫（CSS3)---知道动哦

使用技术：JS+CSS3

浏览器支持：IE9，FireFox，Chrome

效果图：

代码下载：http://download.csdn.net/detail/guoxuepeng123/5303831

源码分享：

<!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="CSDN";//输入你的名字
  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>

分享到：