html粒子效果原理,HTML5字体动态粒子效果

功能说明：

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

效果预览：

详见：http://www.cnblogs.com/Cson/archive/2012/04/02/2429734.html

实现分析：

之前看过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下载：点击下载