原生canvas文字特效 - 二郎素材网

发现一个好玩的，记录下来。代码简单，你还可以修改其他字来试试吧，我想你应该也会喜欢的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript</title>
<style>
    canvas{background-color:#000;}
</style>
</head>
<body>
  <canvas></canvas>
  <script>
      function Tween(sprite,delay){
          this._cantors=[];
          this._step=0;
          this._target=sprite;
          this.delay=this._delay=(delay||0)*1000;
          this.visible=true;
          this.startTime=performance.now();
      }

      Tween.prototype={
          to:function(duration,props){
            this._cantors.push(new Cantor(duration,props));
            return this;
         },
         update:function(ctx,time){
             if(!this.visible){                 
                 return this;
             }
             if(this.delay>0){       
                 this.delay-=time-this.startTime;
                 this.startTime=time;
                 return this;
             }
            var cantor=this._cantors[this._step],
                target,
                baseObj,
                props,
                percent;

            target=this._target;
            props=cantor.props;
            percent=cantor.duration?Math.min(1,(time-this.startTime)/cantor.duration):1; 
            baseObj=this._step?this._cantors[this._step-1].props:target;

            this.x=(props.x-baseObj.x)*percent+baseObj.x;
            this.alpha=(props.alpha-baseObj.alpha)*percent+baseObj.alpha;

            this.rotation=(props.rotation-baseObj.rotation)*percent+baseObj.rotation;            
            target.draw(ctx,this);

            if(percent===1){                                            
                this.next(time); 
                props.onComplete&&props.onComplete.call(this,time); 
            }

            return this;
         },
         next:function(time){
             this.startTime=time; 
             if(++this._step===this._cantors.length){
                 this.visible=false;
             }

             return this;
         },
         loop:function(time){
             this._step=0;
             this.delay=this._delay;
             this.startTime=time;
             this.visible=true;
             return this;
         }
      };

      function Cantor(duration,props){
          this.duration=duration*1000;
          this.props=props;
      }

      function MyText(text,color,fontSize,x,y,alpha,rotation){
          this.text=text;
          this.color=color;
          this.fontSize=fontSize;
          this.x=x;
          this.y=y;
          this.alpha=alpha;
          this.rotation=rotation;
      }

      MyText.prototype={
          draw:function(ctx,cantor){
              ctx.save();
                 ctx.font=this.fontSize+"px null";
                 ctx.textAlign="center";
                 ctx.fillStyle=this.color;
                 ctx.globalAlpha=cantor.alpha;
                 ctx.translate(cantor.x,this.y-this.fontSize/2);
                 ctx.rotate(cantor.rotation);
                 ctx.fillText(this.text,0,this.fontSize/2);
              ctx.restore();
          }
      };

      var cvs=document.querySelector("canvas"),
          ctx=cvs.getContext("2d"),
          text="JAVASCRIPT",
          tweens=[],
          ii=text.length,
          i=0,
          delay=0.3,
          onComplete=function(time){
            var i=tweens.length;   

            while(i--){
              tweens[i].loop(time);
            }
          };

     for(;i<ii;i++){
         tweens[i]=new Tween(new MyText(text[i],"#35C4F0",24,0,80,0,-1.5),delay*(ii-i))
                   .to(0.5,{x:100,alpha:1,rotation:0})
                   .to(1.5,{x:200,alpha:1,rotation:0})
                   .to(0.5,{x:300,alpha:0,rotation:1.5});    
     }

     tweens[0].to(0.1,{x:300,alpha:0,rotation:0,onComplete:onComplete});

      function render(time){
          var i=tweens.length;          
          requestAnimationFrame(render);
          ctx.clearRect(0,0,cvs.width,cvs.height);
          while(i--){
             tweens[i].update(ctx,time);
          }
      }

      requestAnimationFrame(render);

  </script>
</body>
</html>