首頁>網頁設計教程>HTML教程

HTML5高級編程之像素處理及粒子效果

作者：Eve Cole 更新時間：2025-05-17 19:16:01

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複製下來，可以像下面這樣

[javascript] view plaincopy
  1. bitmapData=newLBitmapData(imglist[face]);
  2. bitmapData.lock();
  3. varimg=bitmapData.getPixels(newLRectangle(75,50,100,100));
有時候我們需要對LBitmapData進行多次像素的複制和粘貼操作，這個時候可以使用lock函數，它可以將像素數組緩存起來，在這個過程中，所做的所有的像素操作都是對這個緩存數組進行操作，當操作完畢後，調用相應的unlock函數，將操作完的像素數據粘貼回LBitmapData中。

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

[javascript] view plaincopy
  1. bitmapData2=newLBitmapData(null,0,0,500,400,LBitmapData.DATA_CANVAS);
  2. bitmapData2.lock();
  3. bitmapData2.setPixels(newLRectangle(50,30,50,50),img);
  4. bitmapData2.setPixels(newLRectangle(100,30,50,50),img);
  5. bitmapData2.setPixels(newLRectangle(150,30,50,50),img);
  6. bitmapData2.setPixels(newLRectangle(200,30,50,50),img);
  7. bitmapData2.unlock();

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

執行代碼效果如下

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

[javascript] view plaincopy bitmapData2.lock(); varrect=newLRectangle(50,100,100,100); varrect1=newLRectangle(150,100,100,100); for(vary=0;y<rect.height;y++){ for(varx=0;x<rect.width;x++){ vari=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(vary=0;y<rect1.height;y++){ for(varx=0;x<rect1.width;x++){ vari=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來製作一個酷酷的粒子效果，效果如下。

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

[javascript] view plaincopy varlabelText=newLTextField(); labelText.color=#000000; labelText.weight=bolder; labelText.text=getParameter(k); if(!labelText.text)labelText.text=lufylegend.js; labelText.size=50; varw=labelText.getWidth()*1.1; varh=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=newLSprite(); addChild(backLayer); backLayer.addChild(labelText);效果如下

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

[javascript] view plaincopy varw=labelText.getWidth()*1.1; varh=labelText.size*1.5; labelText.width=w; labelText.setWordWrap(true,h);其實只需要用getWidth()和getHeight()就能獲取文本的高和寬，但是因為canvas中沒有獲取文本高度的函數，所以引擎中用了一個不太準確的方式來獲取（當然，這一點在引擎下次更新中會得到完美的解決），本次開發，所使用的文本高度和寬度都必須不小於文本的原始大小，所以，我給文本重新設定了一下略大的高度和寬度。

接下來，我們利用LBitmapData對象的draw函數，把這個文本轉換為LBitmapData對象，為什麼要轉換成LBitmapData對象？請接著往下看，一會兒就知道了。

[javascript] view%20plaincopy bitmapData=newLBitmapData(#000000,0,0,LGlobal.width,LGlobal.height,LBitmapData.DATA_CANVAS); bitmapData.draw(backLayer);上面的處理其實都是鋪墊，不是用來真正顯示的，下面再來創建一個LBitmapData空對象，並通過LBitmap將其繪製到canvas畫布上

[javascript] view%20plaincopy snowBack=newLBitmapData(null,0,0,LGlobal.width,LGlobal.height,LBitmapData.DATA_CANVAS); varbitmap=newLBitmap(snowBack); backLayer.addChild(bitmap);重點來了，我現在需要對snowBack對象的像素不斷的進行處理，這個簡單，我們通過ENTER_FRAME來實現

[javascript] view%20plaincopy backLayer.addEventListener(LEvent.ENTER_FRAME,run);上面的效果圖，可以看到，我需要往畫布上不斷的添加白色的粒子，就和下雪一樣。但是這些白色粒子，不能直接畫到畫布上，我們需要先將這些粒子添加到一個緩存數組中，然後來批量的操作它們，下面的函數用來生成一個粒子，參數分別是（x坐標，y坐標，下降加速度，x軸方向速度，y軸方向速度）。

[javascript] view%20plaincopy functionparticle(px,py,ps,pvx,pvy){ if(typeofps==UNDEFINED)ps=1; if(typeofpvx==UNDEFINED)pvx=0; if(typeofpvy==UNDEFINED)pvy=0; _snow.push({x:px,y:py,s:ps,vx:pvx,vy:pvy}); }我們通過不斷的調用這個函數，來向畫布中不斷的添加白色粒子，添加到畫布上的粒子，會做向下類似於自由落體的加速運動，在運動過程中會遇到阻礙，就是前面在畫面上顯示過的文字，當粒子碰到文字的時候，受到阻力，運動變得緩慢，這樣粒子在有文字的地方不斷的受到文字的阻礙，大量的白色粒子就會聚集到文字處，就形成了上面的粒子效果。

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

[javascript] view%20plaincopy functioncheckPixel(x,y){ varpixel=bitmapData.getPixel(x,y); for(vari=0;i<pixel.length;i++){ if(pixel[i])returntrue; } returnfalse; }原理就是獲取坐標點像素，然後檢驗像素點的顏色，現在知道為什麼要把前面的文字轉換成LBitmapData對象了吧，就是為了要獲取指定點的像素值。

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

[javascript] view%20plaincopy functionrun(){ varn=_snow.length,d; snowBack.lock(); snowBack.setPixels(rect,0x000000); while(n--){ varp=_snow[n]; p.vy+=gravity*ps; p.y+=p.vy; if(checkPixel(px,py)){ py-=p.vy; p.vy=0; p.y+=0.2; } snowBack.setPixel(px,py,0xffffff); if(py>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中的參數的值。

[javascript] view%20plaincopy functiongetParameter(key){ varstr=location.search.split(?); if(str.length<2){ return; } varparams=str[1].split(&); for(vari=0;i<params.length;i++){ varkeyVal=params[i].split(=); if(keyVal[0]==key&&keyVal.length==2){ returndecodeURIComponent(keyVal[1]); } } return; }然後通過調用這個函數來設定文字的值

[javascript] view%20plaincopy 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
相關文章