Canvas pixel operation

Source: Internet
Author: User

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:


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.