Home > Developer > JavaScript
First look at the source graph and the contrast chart converted into particle effects:
The picture on the left is the source, and the right picture is a particle. The effect is made on the canvas canvas. Making a picture into a particle effect is relatively straightforward. Focus on two points of knowledge
1: The picture is drawn on the canvas through the image object, and then uses the canvas's Getimagedata interface to get the pixel information of the image.
var imagedata=ctx.getimagedata (x, y, width, height);
Parameter description: x, y and y coordinates on the canvas
Width,height to get information for a specified area image
Return value Description: ImageData is the return value, which is an object that contains three properties
Imagedata={ data:unit8clampedarray[10000]//Integer data information containing RGBA for each pixel in the picture area
height:200 //Read picture pixel information area height
width:200//Read picture pixel information area width}2: Understand the layout of the pixel area data, the above obtained image data pixel information (the Data property in the ImageData object) is a one-dimensional array data of the Rgba integer. A pixel is made up of 4 values (R,G,B,A). In other words, the array information is one pixel per four dots. Therefore, there are the following rules,
The first pixel information is: RGBA (data[0],data[1],data[2],data[3])
The second pixel information is: RGBA (Data[4],data[5],data[6],data[7])
.....
The nth pixel information is: RGBA (data[(n-1) *4],data[(n-1) *4+1],data[(n-1) *4+2],data[(n-1) *4+3])
.....
In addition, since the pixel area is an area, it is wide and high. The above calculation formula is suitable for a single row to use to position a pixel point. Therefore, when calculating the pixel point, take into account the location within the entire image area:
For example. Both the width and height of the image are 200, if one row per pixel is a column. The image has a total of 200 rows and 200 columns. So to get the pixel initial position information for row I, Column J, is:
var pos =[(i-1) *200]+ (j-1)]*4;
Where I in the formula represents the number of rows and J indicates the number of columns. 200 is the width of the image.
Demo Code:
<!DOCTYPE html><Html><HeadLang= "en"><MetaCharSet= "UTF-8"><Title></Title></Head><Body><CanvasId= "MyCanvas"Width= "600"Height= "400"Style= "Background: #000"> Browser does not support canvas</Canvas></Body><ScriptType= "Text/javascript">VarCanvas=document.getElementById ("MyCanvas");VarCTx=Canvas.getcontext ("2d");VarImage=NewImage (); Image.src=‘/webworkspace/echartdemo/images/star.png‘;VarPixels=[];//Storing pixel dataVarImageData; Image.onload=function() {Ctx.drawimage (image,200,100,200,200); ImageData=Ctx.getimagedata (200,100,200,200);//Get Chart Pixel informationGetpixels ();//Get all pixelsDrawpic ();//Drawing an image};functionGetpixels () {VarPos=0;VarData=Imagedata.data;//One-dimensional array data for RGBA//The height and width of the source image is 200pxFor(VarI=1; I<=200; I++){For(VarJ=1; j<=200; j++) {POS=[(I-1)*200+(j-1)]*4;//Get pixel positionIf(Data[pos]>=0){VarPixel={x:200+J+Math.random ()*20// reset location information for each pixel Y:100+ i+math.random () *20 //reset location information for each pixel FillStyle: ' Rgba (' +data[pos]+ ', ' + (data[pos+1]) + ', ' + (data[pos+2]) + ', ' + (data[pos+3]) + ') '} pixels.push (pixel); }}}} function Drawpic () {var Canvas=document.getelementbyid ("MyCanvas"); var ctx=canvas.getcontext ("2d"); Ctx.clearrect (0,0,600,400); var len=pixels.length,curr_pixel=null; for (Var i=0;i<len;i++) {curr_pixel=pixels[i]; ctx.fillstyle=curr_pixel.fillstyle; Ctx.fillrect (curr_pixel.x, curr_pixel.y,1,1); }}</script>
Canvas + JavaScript make picture particle effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
