【CSON原创】HTML5字体动态粒子效果发布

功能说明：

　　输入字体，按确定后，右侧画布出现字体的动态粒子效果。

效果预览：

 

输入显示内容：

实现分析：

　　之前看过hongru的事情没有想象中那么难--JX官网首页3D粒子效果，和当耐特砖家的HTML5实验室【三十八】--玩转像素系列【二】，因此自己也试着利用getImageData写一下粒子效果。原理上应该和他们的差不多，不过采用了输入即可得的形式，在文本框输入任何内容，可以在画布中得出输入内容的粒子效果。由于前面两篇文章已经把粒子效果的实现原理阐述得比较清楚，因此这里就不再重新详述，只说说实现时的几个要点。

 

　　1.如何生成3D坐标下随机方向的速度。

　　在2D坐标下，如果需要生成一个随机方向的速度，方法很简单，我们可以获取一个随机角度，并且根据该角度把速度分别投影在xy轴下即可。但是如果在3D坐标下如何生成随机方向的速度呢？其实也可以使用相似的原理，我们需要两个随机角度(a1,a2)，一个角度用于Z轴的投影，另一个用于x或y轴的投影。那么投影在z轴方向的速度为：Vz=V*sin(a1),投影在xy平面的速度分量为：Vxy=V*cos(a1),再根据该分量得出，投影在x轴的分量为：Vx=Vxy*cos(a2),y轴分量为：Vx=Vxy*sin(a2)，代码如下：

                var zSpeed=this.speed*Math.sin(this.angleZ);
                var xySpeed=this.speed*Math.cos(this.angleZ);
                var xSpeed=xySpeed*Math.cos(this.angleX);
                var ySpeed=-xySpeed*Math.sin(this.angleX);

　　

　　2.如何使随机分布的粒子组成字母。

　　首先通过getImageData获取字体每个像素点得信息，并创建每个点对象，保存它们的位置和颜色，透明度等信息。然后在初始化时使粒子分布在随机位置上，需要组成文字的时候，使点对象快速从现在的位置移动到之前保存的位置上。

 

　　3.如何使点受Z轴坐标的影响。

　　Z轴坐标通过点的位置，尺寸体现，因此具体实现是首先通过点的z轴计算出该点缩放的比例，然后根据该比例重新计算点的位置和尺寸。

　　

        resetOnZValue:function(pos,radius){
            var z=pos[2];
            var halfWidth=center[0];
            var scale=(halfWidth+z)/halfWidth;
            var newPos=[];
            var newRadius;
            newPos[0]=center[0]+(pos[0]-center[0])*scale;//计算受z轴影响后小球的位置值和尺寸
            newPos[1]=center[1]-(center[1]-pos[1])*scale;
            newPos[2]=z;
            newRadius=radius*scale;
            return [newPos,newRadius];//返回小球受X轴影响后新的坐标和尺寸
        },

　　更加详细的解释可以参考hongru的rotate 3D [初识篇]。

 

　　完整demo下载：点击下载

　　欢迎转载，请标明出处：http://www.cnblogs.com/Cson/archive/2012/04/02/2429734.html