[读码]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]，[动态文本]，[像素圆点]
1 textStage = new createjs.Stage("text"); 2 stage = new createjs.Stage("stage"); 3 text = new createjs.Text("t", "80px 'Source Sans Pro'", "#eee"); 4 circle = new createjs.Shape();
2.移动像素点计算
1 // c-元素点对象，dir-方向，in:向字聚集，out：打散 2 // movement-jiggle：快速抖动，float：缓慢移动 3 function tweenCircle(c, dir) { 4 if(c.tween) c.tween.kill(); 5 if(dir == 'in') { 6 //向字聚集 7 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() { 8 c.movement = 'jiggle'; 9 tweenCircle(c); 10 }}); 11 } else if(dir == 'out') { 12 //打散 13 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() { 14 c.movement = 'float'; 15 tweenCircle(c); 16 }}); 17 } else { 18 if(c.movement == 'float') { 19 //打散状态下的缓慢移动 20 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, 21 onComplete: function() { 22 tweenCircle(c); 23 }}); 24 } else { 25 //聚集状态下的快速抖动 26 c.tween = TweenLite.to(c, 0.05, {x: c.originX + Math.random()*3, y: c.originY + Math.random()*3, ease:Quad.easeInOut, 27 onComplete: function() { 28 tweenCircle(c); 29 }}); 30 } 31 } 32 }
3.创建文字，并扫描文字位置
1 //text配置后，画到canvas 2 textStage.addChild(text); 3 textStage.update(); 4 //获取[文字Canvas]像素列表 5 var ctx = document.getElementById('text').getContext('2d'); 6 var pix = ctx.getImageData(0,0,600,200).data; 7 //获取的像素是RGBA4个表示一个像素点 8 textPixels = []; 9 for (var i = pix.length; i >= 0; i -= 4) { 10 if (pix[i] != 0) { 11 var x = (i / 4) % 600; // x轴位置，%600(行宽)：用于计算多行 12 var y = Math.floor(Math.floor(i/600)/4); // Y轴位置 13 //下面的代码，各像素圆点之间的距离为8 14 if((x && x%8 == 0) && (y && y%8 == 0)) textPixels.push({x: x, y: y}); 15 } 16 }
4.赋值给像素圆点
1 for(var i= 0, l=textPixels.length; i<l; i++) { 2 circles[i].originX = offsetX + textPixels[i].x; 3 circles[i].originY = offsetY + textPixels[i].y; 4 tweenCircle(circles[i], 'in'); 5 } 6 textFormed = true; // 是否已形成文字Flg 7 //处理多余像素圆点，但是如果文字需要的像素圆点过多，会如何只有一半文字了吧。。。 8 if(textPixels.length < circles.length) { 9 for(var j = textPixels.length; j<circles.length; j++) { 10 circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 0.1}); 11 } 12 }
5.文字爆炸效果
1 for(var i= 0, l=textPixels.length; i<l; i++) { 2 tweenCircle(circles[i], 'out'); 3 } 4 if(textPixels.length < circles.length) { 5 for(var j = textPixels.length; j<circles.length; j++) { 6 circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 1}); 7 } 8 }
----
源码地址：
http://www.html5tricks.com/download/html5-text-pixel.rar
演示地址：
http://www.html5tricks.com/demo/html5-text-pixel/index.html
---
如果此效果用来显示图片，岂不更好玩。。。
似乎可以制作印象派作品了,哪天试试
