HTML5進階編程之像素處理及粒子效果

HTML5中的像素處理，需要用到getImageData和putImageData兩個函數，先用getImageData複製canvas畫布中的像素資料，然後對擷取的像素資料進行處理，最後再通過putImageData將處理完的資料粘貼到canvas畫布。我們不妨把中間處理像素的過程稱作像素的批處理，由於像素的複製和粘貼是兩個比較費時的過程，為了更高效的對像素進行處理，我們應該在一次批處理過程中儘可能處理更多的像素資料，來減少像素的複製和粘貼這兩個操作。

這聽起來似乎是一個相當麻煩的過程，可能有些朋友光是看到上面的幾句話估計就已經開始不耐煩了，其實我也是這麼認為的，所以我把這一麻煩的過程封裝到了lufylegend引擎中的LBitmapData類中，你可以像處理flash的像素一樣處理HTML5中的canvas，這聽起來是不是很有趣？如果你有興趣，那麼請跟著我一起來看一下這個好玩兒的小功能。

首先，來認識一下LBitmapData，它通常是用來儲存Image對象的，具體用法我就不多說了，大家可以看一下API文檔。這裡我主要介紹一下如何用它來批量處理像素。

下面是LBitmapData中的兩個函數

函數	功能
getPixel(x,y,colorType)	返回一個表示 BitmapData 對象中在某個特定點 (x, y) 處的 RGB 像素值的數組。其中colorType為需要擷取的像素資料的格式，預設為像素數組，當設定成字串"number"的時候，返回number型的像素
setPixel(x,y,data)	設定 LBitmapData 對象的單個像素。其中data為像素值(支援像素數組，#FF0000,0xFF000等三種格式)

上面這兩個函數是擷取和設定單個像素，當我們需要一次性擷取或設定一個地區的像素的時候，對應的兩個函數如下

函數	功能
getPixels(rect)	返回一組表示 BitmapData 對象中在某個特定地區的 RGB 像素值的數組。其中rect為LRectangle對象，是一個矩形。
setPixels(rect, data)	將像素資料數群組轉換粘貼到指定的矩形地區。其中data為像素值(支援像素數組，#FF0000,0xFF000等三種格式)

我們先來準備一張圖片，比如下面鄙人這張帥帥的頭像，莫吐...

如果想要把中間比較帥的臉部通過getPixels複製下來，可以像下面這樣

bitmapData = new LBitmapData(imglist["face"]);bitmapData.lock();var img = bitmapData.getPixels(new LRectangle(75,50,100,100));

有時候我們需要對LBitmapData進行多次像素的複製和粘貼操作，這個時候可以使用lock函數，它可以將像素數組緩衝起來，在這個過程中，所做的所有的像素操作都是對這個緩衝數組進行操作，當操作完畢後，調用相應的unlock函數，將操作完的像素資料粘貼回LBitmapData中。

比如下面這樣，我們將複製完的數組中的一部分，分四次粘貼到另外一個LBitmapData的四個不同的位置上。

bitmapData2 = new LBitmapData(null,0,0,500,400,LBitmapData.DATA_CANVAS);bitmapData2.lock();bitmapData2.setPixels(new LRectangle(50,30,50,50),img);bitmapData2.setPixels(new LRectangle(100,30,50,50),img);bitmapData2.setPixels(new LRectangle(150,30,50,50),img);bitmapData2.setPixels(new LRectangle(200,30,50,50),img);bitmapData2.unlock();

上面的代碼，首先建立了一個空的LBitrmapData對象，最後一個參數是lufylegend-1.8.8版中的新功能，將LBitrmapData對象中儲存的資料轉換為canvas對象，這樣可以提高像素操作的效率。

執行代碼效果如下

當然，你也可以對這些像素做一些處理，比如下面這樣

bitmapData2.lock();var rect = new LRectangle(50,100,100,100);var rect1 = new LRectangle(150,100,100,100);for(var y=0;y<rect.height;y++){for(var x=0;x<rect.width;x++){var i = y*4*100+x*4;bitmapData2.setPixel(rect.x+rect.width-x,y+rect.y,[img.data[i],img.data[i+1],img.data[i+2],img.data[i+3]]);}}for(var y=0;y<rect1.height;y++){for(var x=0;x<rect1.width;x++){var i = y*4*100+x*4;bitmapData2.setPixel(x+rect1.x,y+rect1.y,[img.data[i],img.data[i+1],img.data[i+2],img.data[i+3]]);}}bitmapData2.unlock();

效果如下

可以看到，我們成功的通過處理像素，將圖片翻轉了過來。

當然圖片翻轉不需要這麼麻煩，在lufylegend.js引擎中，你只需要將對象的屬性scaleX設定為-1就可以實現圖片的翻轉。這裡我們主要是為了說明像素的處理很靈活而已。

好了，有了上面的介紹，我們可以用這些API來製作一個酷酷的粒子效果，效果如下。

首先，我們先在畫布上加一個文本

var labelText = new LTextField();labelText.color = "#000000";labelText.weight = "bolder";labelText.text = getParameter("k");if(!labelText.text)labelText.text="lufylegend.js";labelText.size = 50;var w = labelText.getWidth()*1.1;var h = labelText.size*1.5;labelText.width = w;labelText.setWordWrap(true,h);labelText.x = (LGlobal.width - w)*0.5;labelText.y = (LGlobal.height - h)*0.5;backLayer = new LSprite();addChild(backLayer);backLayer.addChild(labelText);

效果如下

上面唯一需要解釋的是下面幾行

var w = labelText.getWidth()*1.1;var h = labelText.size*1.5;labelText.width = w;labelText.setWordWrap(true,h);

其實只需要用getWidth()和getHeight()就能擷取文本的高和寬，但是因為canvas中沒有擷取文本高度的函數，所以引擎中用了一個不太準確的方式來擷取（當然，這一點在引擎下次更新中會得到完美的解決），本次開發，所使用的文本高度和寬度都必須不小於文本的原始大小，所以，我給文本重新設定了一下略大的高度和寬度。
接下來，我們利用LBitmapData對象的draw函數，把這個文本轉換為LBitmapData對象，為什麼要轉換成LBitmapData對象？請接著往下看，一會兒就知道了。

bitmapData = new LBitmapData("#000000",0,0,LGlobal.width,LGlobal.height,LBitmapData.DATA_CANVAS);bitmapData.draw(backLayer);

上面的處理其實都是鋪墊，不是用來真正顯示的，下面再來建立一個LBitmapDataNull 物件，並通過LBitmap將其繪製到canvas畫布上

snowBack = new LBitmapData(null,0,0,LGlobal.width,LGlobal.height,LBitmapData.DATA_CANVAS);var bitmap = new LBitmap(snowBack);backLayer.addChild(bitmap);

重點來了，我現在需要對snowBack對象的像素不斷的進行處理，這個簡單，我們通過ENTER_FRAME來實現

backLayer.addEventListener(LEvent.ENTER_FRAME,run);

上面的，可以看到，我需要往畫布上不斷的添加白色的粒子，就和下雪一樣。但是這些白色粒子，不能直接畫到畫布上，我們需要先將這些粒子添加到一個緩衝數組中，然後來批量的操作它們，下面的函數用來產生一個粒子，參數分別是（x座標，y座標，下降加速度，x軸方向速度，y軸方向速度）。

function particle(px,py,ps,pvx,pvy){if(typeof ps == UNDEFINED)ps = 1;if(typeof pvx == UNDEFINED)pvx = 0;if(typeof pvy == UNDEFINED)pvy = 0;_snow.push({x:px,y:py,s:ps,vx:pvx,vy:pvy});}

我們通過不斷的調用這個函數，來向畫布中不斷的添加白色粒子，添加到畫布上的粒子，會做向下類似於自由落體的加速運動，在運動過程中會遇到阻礙，就是前面在畫面上顯示過的文字，當粒子碰到文字的時候，受到阻力，運動變得緩慢，這樣粒子在有文字的地方不斷的受到文字的阻礙，大量的白色粒子就會聚集到文字處，就形成了上面的粒子效果。

下面的函數用來檢驗指定座標處是否處在文字上

function checkPixel(x,y){var pixel = bitmapData.getPixel(x,y);for(var i=0;i<pixel.length;i++){if(pixel[i])return true;}return false;}

原理就是擷取座標點像素，然後檢驗像素點的顏色，現在知道為什麼要把前面的文字轉換成LBitmapData對象了吧，就是為了要擷取指定點的像素值。

最後，只需要不斷的加入白色粒子，然後讓粒子不斷的向下加速運動就可以了。

function run(){var n = _snow.length, d;snowBack.lock();snowBack.setPixels(rect,0x000000);while(n--){var p = _snow[n];p.vy += gravity * p.s;p.y += p.vy;if(checkPixel(p.x, p.y)){p.y -= p.vy;p.vy = 0;p.y += 0.2;}snowBack.setPixel(p.x, p.y, 0xffffff);if(p.y > LGlobal.height) {_snow.splice(n, 1);}}snowBack.unlock();n = 10;while(n--) {particle(Math.random() * LGlobal.width, 0, Math.random() + 0.5);}}

好了，大功告成了。

上面的例子中，文字［lufylegend.js］是固定的，我們還可以再進一步擴充，通過URL設定所需要顯示的文字。下面的函數可以用來擷取URL中的參數的值。

function getParameter(key) {var str = location.search.split("?");if (str.length < 2) {return "";}var params = str[1].split("&");for (var i = 0; i < params.length; i++) {var keyVal = params[i].split("=");if (keyVal[0] == key && keyVal.length == 2) {return decodeURIComponent(keyVal[1]);}}return "";}

然後通過調用這個函數來設定文字的值

labelText.text = getParameter("k");

好了，大家可以來測試一下了，下面的URL，你可以把後面的文字，改成自己喜歡的任意的字元

http://lufylegend.com/demo/snow_word/index.html?k=大家好

源碼
其實lufylegend引擎下載包中有源碼，不過和本文中略有不同，本文的源碼只有一個HTML檔案，你直接用瀏覽器右鍵就可以看到完整的源碼了。

好了，接下來，請發揮你的想象力，製作更帥更有意思的粒子效果吧

比如下面的這個比較特別的粒子效果。

http://lufylegend.com/demo/particle01/

lufylegend.js引擎官網

http://lufylegend.com/lufylegend

lufylegend.js引擎線上API文檔連結

http://lufylegend.com/lufylegend/api

歡迎繼續關注我的部落格

轉載請註明：