【边读码，边学习，技术也好，思路也罢】
【一款基于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
---
如果此效果用来显示图片，岂不更好玩。。。
似乎可以制作印象派作品了,哪天试试