[读码]HTML5像素文字爆炸重组

【边读码，边学习，技术也好，思路也罢】

【一款基于HTML5技术的文字像素爆炸重组动画特效，我们可以在输入框中指定任意文字，点击确定按钮后，就会将原先的文字爆炸散去，新的文字以像素点的形式组合起来，看起来非常棒。】

一开始想着，怎么在一个Canvas里获取文字的像素点位置。
还是说，有专门的Api获取文字的位置。
结果看了代码才发现，原来是用了那么个巧妙的办法[巧妙而超级简单]。
也就是说，所有的图片，都可以动态的用点来画出来了。
虽然说，扫描canvas的做法效率不高，但是似乎也只能这样了。

---
大致实现方法如下：
1.放两个canva，一个用于放置背景以及动态像素点[背景Canvas]，另一个不可见的用于画文字[文字Canvas]
2.[背景Canvas]里生成像素圆点小球，使其自由移动。
3.当点击按钮时，先在[文字Canvas]里画上相应的文字。然后扫描[文字Canvas]里的像素，有内容的话，就将该位置指定给像素小球。
4.使用动画，移动小球到指定位置[需要flg来表明状态吧]
---
使用js库：
1.EasePack[渐变效果用]
2.TweenLite[渐变用]
3.easeljs
[Useful for creating games, generative art, and other highly graphical experiences.]

以上插件都整合在CreateJs里
http://createjs.com/
---
关键代码段：

1.创建[背景Canvas]，[文字Canvas]，[动态文本]，[像素圆点]

 textStage = new createjs.Stage("text");
 stage = new createjs.Stage("stage");
 text = new createjs.Text("t", "80px 'Source Sans Pro'", "#eee");
 circle = new createjs.Shape();

2.移动像素点计算

 // c-元素点对象，dir-方向，in:向字聚集，out：打散
 // movement-jiggle：快速抖动，float：缓慢移动
 function tweenCircle(c, dir) {
     if(c.tween) c.tween.kill();
     if(dir == 'in') {
     //向字聚集
         c.tween = TweenLite.to(c, 0.4, {x: c.originX, y: c.originY, ease:Quad.easeInOut, alpha: 1, radius: 5, scaleX: 0.4, scaleY: 0.4, onComplete: function() {
         c.movement = 'jiggle';
         tweenCircle(c);
         }});
     } else if(dir == 'out') {
     //打散
         c.tween = TweenLite.to(c, 0.8, {x: window.innerWidth*Math.random(), y: window.innerHeight*Math.random(), ease:Quad.easeInOut, alpha: 0.2 + Math.random()*0.5, scaleX: 1, scaleY: 1, onComplete: function() {
         c.movement = 'float';
         tweenCircle(c);
         }});
     } else {
         if(c.movement == 'float') {
         //打散状态下的缓慢移动
         c.tween = TweenLite.to(c, 5 + Math.random()*3.5, {x: c.x + -100+Math.random()*200, y: c.y + -100+Math.random()*200, ease:Quad.easeInOut, alpha: 0.2 + Math.random()*0.5,
             onComplete: function() {
             tweenCircle(c);
             }});
         } else {
         //聚集状态下的快速抖动
         c.tween = TweenLite.to(c, 0.05, {x: c.originX + Math.random()*3, y: c.originY + Math.random()*3, ease:Quad.easeInOut,
             onComplete: function() {
             tweenCircle(c);
             }});
         }
     }
 }

3.创建文字，并扫描文字位置

 //text配置后，画到canvas
 textStage.addChild(text);
 textStage.update();
 //获取[文字Canvas]像素列表
 var ctx = document.getElementById('text').getContext('2d');
 var pix = ctx.getImageData(0,0,600,200).data;
 //获取的像素是RGBA4个表示一个像素点
 textPixels = [];
 for (var i = pix.length; i >= 0; i -= 4) {
     if (pix[i] != 0) {
     var x = (i / 4) % 600; // x轴位置，%600(行宽)：用于计算多行
     var y = Math.floor(Math.floor(i/600)/4); // Y轴位置
     //下面的代码，各像素圆点之间的距离为8
     if((x && x%8 == 0) && (y && y%8 == 0)) textPixels.push({x: x, y: y});
     }
 }

4.赋值给像素圆点

 for(var i= 0, l=textPixels.length; i<l; i++) {
     circles[i].originX = offsetX + textPixels[i].x;
     circles[i].originY = offsetY + textPixels[i].y;
     tweenCircle(circles[i], 'in');
 }
 textFormed = true; // 是否已形成文字Flg
 //处理多余像素圆点，但是如果文字需要的像素圆点过多，会如何只有一半文字了吧。。。
 if(textPixels.length < circles.length) {
     for(var j = textPixels.length; j<circles.length; j++) {
     circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 0.1});
     }
 }

5.文字爆炸效果

 for(var i= 0, l=textPixels.length; i<l; i++) {
     tweenCircle(circles[i], 'out');
 }
 if(textPixels.length < circles.length) {
     for(var j = textPixels.length; j<circles.length; j++) {
     circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 1});
     }
 }

----

源码地址：
http://www.html5tricks.com/download/html5-text-pixel.rar

演示地址：
http://www.html5tricks.com/demo/html5-text-pixel/index.html

---

如果此效果用来显示图片，岂不更好玩。。。
似乎可以制作印象派作品了,哪天试试