【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