[读码]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

---

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