HTML5 Advanced Programming Pixel Processing and Particle Effects

Author：Eve Cole Update Time：2025-05-17 19:16:01

For pixel processing in HTML5, you need to use two functions getImageData and putImageData. First use getImageData to copy the pixel data in the canvas canvas, then process the obtained pixel data, and finally paste the processed data into the canvas canvas through putImageData . We might as well call the process of processing pixels in the middle a pixel batch processing. Since copying and pasting pixels are two time-consuming processes, in order to process pixels more efficiently, we should process as much pixel data as possible in a batch process to reduce the two operations of copying and pasting pixels.

This sounds like a very troublesome process. Some friends may be impatient just by seeing the above sentences. In fact, I think so, so I encapsulated this troublesome process into the LBitmapData class in the lufylegend engine. You can handle canvas in HTML5 like pixels in flash. Doesn't this sound very interesting? If you are interested, please follow me to take a look at this fun little feature.

First, let’s get to know LBitmapData, which is usually used to save Image objects. I won’t talk about the specific usage. You can take a look at the API documentation. Here I will mainly introduce how to use it to batch process pixels.

Below are two functions in LBitmapData

function	Function
getPixel(x,y,colorType)	Returns an array representing the RGB pixel values in a BitmapData object at a specific point (x, y). where colorType is the format of the pixel data to be retrieved, and the default is a pixel array. When set to a string number, it returns a pixel of the number type.
setPixel(x,y,data)	Sets a single pixel of the LBitmapData object. Where data is a pixel value (supports three formats: pixel array, #FF0000, 0xFF000, etc.)

The above two functions are to obtain and set a single pixel. When we need to obtain or set a pixel in an area at one time, the corresponding two functions are as follows

function	Function
getPixels(rect)	Returns an array representing the RGB pixel values in a specific area in a BitmapData object. where rect is an LRectangle object, which is a rectangle.
setPixels(rect, data)	Converts and pastes the pixel data array to the specified rectangle area. Where data is a pixel value (supports three formats: pixel array, #FF0000, 0xFF000, etc.)

Let's prepare a picture first, such as the handsome avatar of my man below, don't vomit...

If you want to copy the handsome face in the middle through getPixels, you can do it like this

[javascript] view plaincopy

bitmapData=newLBitmapData(imglist[face]);
bitmapData.lock();
varimg=bitmapData.getPixels(newLRectangle(75,50,100,100));

Sometimes we need to copy and paste pixels on LBitmapData multiple times. At this time, we can use the lock function, which can cache the pixel array. In this process, all the pixel operations done are operated on this cache array. After the operation is completed, the corresponding unlock function is called to paste the operation pixel data back into LBitmapData.

For example, as shown below, we paste part of the copied array into four different locations in another LBitmapData in four times.

[javascript] view plaincopy

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

The above code first creates an empty LBitrmapData object. The last parameter is a new feature in lufylegend-1.8.8 version, converting the data saved in the LBitrmapData object into a canvas object, which can improve the efficiency of pixel operations.

The execution code effect is as follows

Of course, you can also do some processing on these pixels, such as the following

[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(); The effect is as follows

As you can see, we successfully flipped the picture over by processing pixels.

Of course, image flipping does not need to be so troublesome. In the lufylegend.js engine, you only need to set the object's property scaleX to -1 to achieve image flip. Here we mainly show that the pixel processing is very flexible.

Okay, with the above introduction, we can use these APIs to create a cool particle effect, the effect is as follows.

First, let's add a text to the canvas

[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); The effect is as follows

The only ones that need to be explained above are the following lines

[javascript] view plaincopy

varw=labelText.getWidth()*1.1; varh=labelText.size*1.5; labelText.width=w; labelText.setWordWrap(true,h); In fact, you only need to use getWidth() and getHeight() to get the height and width of the text. However, because there is no function to get the text height in canvas, the engine uses an inaccurate way to get it (of course, this will be perfectly solved in the next update of the engine). In this development, the text height and width used must be no less than the original size of the text, so I reset the slightly larger height and width for the text.

Next, we use the draw function of the LBitmapData object to convert this text into an LBitmapData object. Why do we need to convert it into an LBitmapData object? Please continue to look down and you will know in a while.