canvas粒子文字渐进渐出效果

之前一直想做一个文字粒子效果的淡出淡进，这两天事情就写了一下代码，效果地址：http://www.mjix.com/code/canvas-text/   ，按F11进入全屏，做屏保还可以，预览图

主要是在粒子（文字像素点）的位移问题上的处理方法。淡进前需要先获取到像素点的初始位置极其透明度，这个东东运用到数学左边换算问题，要遇到数学有点头大就跳过吧

    //获取渐进前的像素点位置
    getInData : function(data, min, offset){
        var xs = [],
            ys = [];
        this.each(data, function(info, index){
            xs.push(info[0]);
            ys.push(info[1]);
        });

        var max = Math.max.apply(xs, xs),
            mix = Math.min.apply(xs, xs),
            may = Math.max.apply(ys, ys),
            miy = Math.min.apply(ys, ys),
            //找出近似中间点
            midx = (max+mix) / 2, 
            midy = (may+miy) / 2;

        var self = this,
            dis  = 0,
            len = 0,
            prop = 0,
            newData = [];
        this.each(data, function(info, index){
            alp = -self.random(0.1, 1);
            len = min+self.random(offset);
            dis = Math.sqrt(self.getDistance(info, [midx, midy]));

            prop = len/(dis+len);
            newData.push([]);
            var xy = Math.ceil((info[0]-prop*midx)/(1-prop));
            newData[index][0] = xy; 
            xy = Math.ceil((info[1]-prop*midy)/(1-prop));
            newData[index][1] = xy; 
            newData[index][2] = info[2].concat();
            newData[index][2][3] = alp;
        });
        return newData;
    },

然后是更新像素点位置，方法是，随机一个前进长度，根据当前点和目标点及移动不长确定下一个移动目标点的位置，如下

//获取指定长度点目标点位置
    getDestDot : function(data1, data2, length){
        if(data2[1]==data1[1] && data2[0]==data1[0]){
            return data2;
        }

        var xdis = Math.sqrt(this.getDistance(data1, data2)),
            prop = length/xdis;

        x = Math.ceil(prop*(data2[0]-data1[0])) + data1[0];
        y = Math.ceil(prop*(data2[1]-data1[1])) + data1[1];
        return [x, y];
    },

直到所有的像素全部归位后，设置延迟，再淡出，淡出我就草草处理了，意思意思，效果自己看，源码就不说了。如所有的代码一样可能存在各种兼容性，BUG等等不可预料问题，留言反馈。

对于字体的加载，怎么检测是否加载完成，有知道的麻烦告知