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

这篇文章主要为大家介绍了如何使用JS+CSS3技术：让你的名字动起来，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

使用技术：JS+CSS3

浏览器支持：IE9，FireFox，Chrome

效果图：

源码分享：

<!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></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>

本文如何使用JS+CSS3技术：让你的名字动起来到此结束。想去做的事情很多，所以我们得去努力，不只是想想而已。小编再次感谢大家对我们的支持！

全站频道

大家都在搜索：