首页 > 代码库 > canvas粒子文字渐进渐出效果
canvas粒子文字渐进渐出效果
之前一直想做一个文字粒子效果的淡出淡进，这两天事情就写了一下代码，效果地址：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 =http://www.mamicode.com/ [];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等等不可预料问题，留言反馈。
对于字体的加载，怎么检测是否加载完成，有知道的麻烦告知
canvas粒子文字渐进渐出效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。