燃烧字体哦，燃烧字体

/**
 * Burning Words, 
 * Effect of burning text with an ability to customize colors, 
 * fonts, burning speed and other parameters.
 *
 * Version: 1.0
 * Author: Michael Ryvkin, http://www.ponticstar.com
 * License: GNU Lesser General Public License, http://www.gnu.org/licenses/lgpl.html
 * Created: 2010-04-17
 * Last updated: 2010-04-17
 * Link: http://www.ponticstar.com/projects/burning-words/
 */

if(typeof(PonticStar) == "undefined"){ var PonticStar = {}; }

PonticStar.BurningWords = function (){
   this.interval_id = null;
   this.palette     = null;
   this.canvas      = null;  

   this.stop  = function(){
      if(this.interval_id !== null) clearInterval(this.interval_id);
   };

   this.show  = function(text, text_color, font, font_size, bg_color, bg_alpha, speed, id){
      this.stop();

      // Define a palette
      if(this.palette === null){
         this.palette = [];
         for(var i = 0; i < 64; i++){
            this.palette[i]       = [i * 4, 0,     0];
            this.palette[i + 64]  = [255,   i * 4, 0];
            this.palette[i + 128] = [255,   255,   i * 4];
            this.palette[i + 192] = [255,   255,   255];
         }
      }

      this.font_string = font_size + "px " + font;

      this.text = text;
      this.text_color_string = "rgb(" + parseInt(text_color.substring(0, 2), 16) + ","
                                      + parseInt(text_color.substring(2, 4), 16) + ","
                                      + parseInt(text_color.substring(4, 6), 16) + ")";

      this.bg_color_r = parseInt(bg_color.substring(0, 2), 16);
      this.bg_color_g = parseInt(bg_color.substring(2, 4), 16);
      this.bg_color_b = parseInt(bg_color.substring(4, 6), 16);
      this.bg_color_a = Math.floor(255 * bg_alpha / 100);
      this.bg_color_a_pct = bg_alpha / 100;

      this.bg_color_string = "rgba(" + this.bg_color_r + "," + this.bg_color_g + "," + this.bg_color_b + "," + this.bg_alpha + ")";

      // If animation speed is given in milliseconds
      var speed_msec; 
      if(speed && !isNaN(Number(speed)) && speed.toString().match(/^\s+$/) === null){
         speed_msec = speed;

      // Otherwise, if animation speed is given as a keyword
      } else {
         switch(speed){
         case "x-fast":
            speed_msec =  10; break;
         case "fast":
            speed_msec =  25; break;  
         case "slow":
            speed_msec = 100; break;  
         case "x-slow":
            speed_msec = 150; break; 
         default:
         case "normal":
            speed_msec =  50; break;
         }
      }
 
      if(!id){ id = 'text-burning-' + this.counter; }

      this.counter++;

      var el = document.getElementById(id);

      var canvas_id;
      if(!el){
         document.write('<canvas id="' + id + '" style="font-family:' + font + '; font-size:' + font_size + 'px"></canvas>');
         canvas_id = id;

      } else {
         el.innerHTML = '<canvas id="' + id + '-canvas" style="font-family:' + font + '; font-size:' + font_size + 'px"></canvas>';
         canvas_id = id + "-canvas";
      }

      this.canvas = document.getElementById(canvas_id);

      if(this.canvas.getContext){
         var dc = this.canvas.getContext('2d');
         dc.font = this.font_string;
         this.text_size = dc.measureText(text);

         this.canvas.width  = this.text_size.width + 10;
         this.canvas.height = Math.floor(font_size * 1.5);

         this.fire_decay = Math.floor(3 + Math.exp(3.6 - font_size/7));

         dc.fillStyle = "rgb(0,0,0)"; //bg_color_string;
         dc.fillRect (0, 0, this.canvas.width, this.canvas.height);
         this.image = dc.getImageData(0, 0, this.canvas.width, this.canvas.height);

         dc.fillStyle = "rgb(0,0,0)";
         dc.fillRect (0, 0, this.canvas.width, this.canvas.height);
         this.image_flame = dc.getImageData(0, 0, this.canvas.width, this.canvas.height);

         // drawing code here
         dc.fillStyle = "rgb(0,0,0)";
         dc.fillRect (0, 0, this.canvas.width, this.canvas.height);

         dc.fillStyle    = "rgb(255,255,255)";
         dc.font         = this.font_string;
         dc.textAlign    = 'center';
         dc.textBaseline = 'bottom';
         dc.fillText(text, this.canvas.width/2, this.canvas.height);
         this.image_src = dc.getImageData(0, 0, this.canvas.width, this.canvas.height);

         dc.putImageData(this.image, 0, 0);

         var that = this;
         this.interval_id = setInterval(function(){ that.burn(); } , speed_msec); 

      } else {
         el.innerHTML = "Canvas element is not supported";
      }
   };

   this.burn = function(){
      var dc = this.canvas.getContext('2d');

      var image_data_len = this.canvas.width * this.canvas.height * 4;
      for(var pos = 0; pos < image_data_len; pos+=4){
         if(this.image_src.data[pos] == 255){
            this.image_flame.data[pos] = Math.floor(Math.random() * 256);
         }
      }

      var incr1 = (this.canvas.width * 4);
      for(var pos = 0; pos < (image_data_len - incr1); pos+=4){
         var x = pos % incr1;

         var l = this.image_flame.data[ ((x == 0) ? pos + incr1 : pos) - 4 ];
         var r = this.image_flame.data[ ((x == incr1 - 4) ? pos - incr1 : pos) + 4 ];
         var b = this.image_flame.data[ pos + incr1 ];
         var avg = Math.floor((l + r + b + b) / 4);

         // auto reduce it so you get lest of the forced fade and more vibrant fire waves
         if (avg > 0){ avg -= this.fire_decay; }

         // normalize
         if (avg < 0){ avg = 0; }

         this.image_flame.data[pos] = avg;
      }

         
      // 4 for 4 ints per pixel
      for(var pos = 0; pos < image_data_len; pos+=4){
         if(this.image_flame.data[pos] != 0){
            var c = this.image_flame.data[pos];
            var pal = this.palette;
            var a = (1 - (3 * c)/255);
            if(a < 0){ a = 0; }
            if(a > this.bg_color_a){ a = this.bg_color_a; }

            this.image.data[pos]     = Math.min(255, pal[c][0] + Math.floor(this.bg_color_r * a));
            this.image.data[pos + 1] = Math.min(255, pal[c][1] + Math.floor(this.bg_color_g * a));
            this.image.data[pos + 2] = Math.min(255, pal[c][2] + Math.floor(this.bg_color_b * a));
            this.image.data[pos + 3] = Math.max(this.bg_color_a, Math.min(3 * c, 255));

         } else {
            this.image.data[pos]     = this.bg_color_r;
            this.image.data[pos + 1] = this.bg_color_g;
            this.image.data[pos + 2] = this.bg_color_b;
            this.image.data[pos + 3] = this.bg_color_a;
         }
      }

      // put pixel data on canvas
      dc.putImageData(this.image, 0, 0);

      dc.fillStyle    = this.text_color_string;
      dc.font         = this.font_string;
      dc.textAlign    = 'center';
      dc.textBaseline = 'bottom';
      dc.fillText(this.text, this.canvas.width/2, this.canvas.height);
   }
};