亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

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

2024-08-26 00:17:26

字體：大中小

來源：轉載

供稿：網友

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等三種格式)

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

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

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

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

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

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

[javascript] view plaincopy							
			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對象，這樣可以提高像素操作的效率。

執行代碼效果如下

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

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

			[javascript] view plaincopy							

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來制作一個酷酷的粒子效果，效果如下。

HTML5高級編程之像素處理及粒子效果
首先，我們先在畫布上加一個文本

			[javascript] view plaincopy							

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);

效果如下

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

			[javascript] view plaincopy							

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對象？請接著往下看，一會兒就知道了。

[javascript] view%20plaincopy HTML5高級編程之像素處理及粒子效果