【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




 


你可能感兴趣的:(html5)