标签：des style blog http color io ar 2014 div
之前一直想做一个文字粒子效果的淡出淡进，这两天事情就写了一下代码，效果地址：http://www.mjix.com/code/canvas-text/ ，按F11进入全屏，做屏保还可以，预览图
主要是在粒子（文字像素点）的位移问题上的处理方法。淡进前需要先获取到像素点的初始位置极其透明度，这个东东运用到数学左边换算问题，要遇到数学有点头大就跳过吧，我学数学的/偷笑
1 //获取渐进前的像素点位置 2 getInData : function(data, min, offset){ 3 var xs = [], 4 ys = []; 5 this.each(data, function(info, index){ 6 xs.push(info[0]); 7 ys.push(info[1]); 8 }); 9 10 var max = Math.max.apply(xs, xs), 11 mix = Math.min.apply(xs, xs), 12 may = Math.max.apply(ys, ys), 13 miy = Math.min.apply(ys, ys), 14 //找出近似中间点 15 midx = (max+mix) / 2, 16 midy = (may+miy) / 2; 17 18 var self = this, 19 dis = 0, 20 len = 0, 21 prop = 0, 22 newData = []; 23 this.each(data, function(info, index){ 24 alp = -self.random(0.1, 1); 25 len = min+self.random(offset); 26 dis = Math.sqrt(self.getDistance(info, [midx, midy])); 27 28 prop = len/(dis+len); 29 newData.push([]); 30 var xy = Math.ceil((info[0]-prop*midx)/(1-prop)); 31 newData[index][0] = xy; 32 xy = Math.ceil((info[1]-prop*midy)/(1-prop)); 33 newData[index][1] = xy; 34 newData[index][2] = info[2].concat(); 35 newData[index][2][3] = alp; 36 }); 37 return newData; 38 },
然后是更新像素点位置，方法是，随机一个前进长度，根据当前点和目标点及移动不长确定下一个移动目标点的位置，如下
1 //获取指定长度点目标点位置 2 getDestDot : function(data1, data2, length){ 3 if(data2[1]==data1[1] && data2[0]==data1[0]){ 4 return data2; 5 } 6 7 var xdis = Math.sqrt(this.getDistance(data1, data2)), 8 prop = length/xdis; 9 10 x = Math.ceil(prop*(data2[0]-data1[0])) + data1[0]; 11 y = Math.ceil(prop*(data2[1]-data1[1])) + data1[1]; 12 return [x, y]; 13 },
直到所有的像素全部归位后，设置延迟，再淡出，淡出我就草草处理了，意思意思，效果自己看，源码就不说了。如所有的代码一样可能存在各种兼容性，BUG等等不可预料问题，留言反馈。
对于字体的加载，怎么检测是否加载完成，有知道的麻烦告知
标签：des style blog http color io ar 2014 div
原文地址：http://www.cnblogs.com/mjix/p/3954322.html
