Canvas pixel operation

Canvas pixel operation Createimagedata

Description: Create a new, blank ImageData object

Syntax: 1 to create a new ImageData object in the specified dimensions (in pixels):

var imgdata=context.createimagedata (width,height);

2, create a new ImageData object of the same size as the specified other ImageData object (image data will not be copied):

var imgdata=context.createimagedata (ImageData);

Parameter description: Width,imagedata object's broadband, pixel meter. Height:imagedata the height of the object, pixel, ImageData: Another Imagetdata object.

Description

The Createimagedata () method creates a new, blank ImageData object. The default pixel value for the new object transparent black.

For each pixel in the ImageData object, there are four aspects of the information, namely the RGBA value: R-Red (0-255) G-Green (0-255) B-Blue (0-255) A-alpha channel (0-255; 0 is transparent, 255 is complete All visible)

So, transparent Black says (0,0,0,0).

Color/alpha exists as an array, and since the array contains four messages per pixel, the size of the array is four times times that of the ImageData object. (An easier way to get the size of an array is to use ImageDataObject.data.length)

An array containing color/alpha information is stored in the Data property of the ImageData object.
Getimagedata

The Getimagedata () method returns a ImageData object that copies the pixel data for the specified rectangle of the canvas.

Syntax: Var imgdata=context.getimagedata (x,y,width,height);

Parameter description: x, the upper-left x-coordinate of the start copy, y: The upper-left y-coordinate at which to begin copying. Width: The bandwidth of the rectangular area to be copied, height: the width of the rectangular area that will be copied.
Putimagedata

The Putimagedata () method places the image data (from the specified ImageData object) back on the canvas.

Grammar: Context.putimagedata (imgdata,x,y,dirtyx,dirtyy,dirtywidth,dirtyheight);

Parameters: Imgdata: Specify the ImageData object to put back to the canvas, x:imagedata the x-coordinate of the upper-left corner of the object, in pixels, y:imagedata the y-coordinate of the upper-left corner of the object in pixels.

Dirtyx: Optional, horizontal value (x), where the image is placed on the canvas in pixels. Dirtyy: Optional. Horizontal value (y), in pixels, where the image is placed on the canvas.

Dirtywidth: Optional. The width used to draw the image on the canvas ... Dirtyheight: Optional. The height used to draw the image on the canvas.

Sample code:

<! DOCTYPE html>  

Effect Chart: