IT. Expert System.

HTML

Introduction


Pixel Manipulation

The Canvas element basically creates an area of pixels. No matter what shape or image is drawn on the canvas, it gets converted to pixels. These pixels can be manipulated directly using the getImageData() and putImageData() methods.

'get' and 'set' ImageData

The getImageData() method returns an ImageData structure containing the width and height of the canvas data as well as the actual pixels stored in a long array of RGBA values called data. Once the pixel data has been obtained, the pixels can be read, changed, and put back to the canvas with the putImageData() method.

The following example draws a red rectangle, 'gets' all of the pixels, sets the green part of each pixel to half (128), sets the blue part of each pixel to 0, then 'puts' the data back to the canvas.

// Draw a rectangle
c.fillStyle = "red";
c.fillRect(10,10,50,50);

// Get the Canvas data
var data = c.getImageData(0, 0, canvas.width, canvas.height);

// Modify the colors
for(n=0; n<data.width*data.height; n++) {
  var pi = n*4; //pixel index 
  //data.data[pi]   don't touch the red
  data.data[pi+1] = 128;  // set green to half
  data.data[pi+2] = 0;  //set blue to zero
  data.data[pi+3] = 255; //set alpha to max
}

// Put the Canvas data
c.putImageData(data,0,0);

This code produces the following result:


Note: Each pixel is represented by four values -- the red, blue, green, and alpha values. Because they are separate values, they can be manipulated without having to use bit-shifting.

Creating ImageData

Instead of getting the image data using getImageData(), a new imageData can be created from scratch with the createImageData method.

The following example creates a new 50x50 pixel imageData object, fills it with random red/blue/green pixels, then puts the data onto the Canvas:

// Create the ImageData
var data = c.createImageData(50,50);

// Set each pixel to a random color
for(n=0; n<data.width*data.height;n++) {
  var index = n*4;
  //fill with random red/blue color
  data.data[index] = Math.random()*255;
  data.data[index+1] = Math.random()*255;
  data.data[index+2] = Math.random()*255;
  data.data[index+3] = 255;
}

// Set the data back
c.putImageData(data,10,10);

This code produces the following result:

Browser Support

The following table lists the attributes / methods related to this section and their browser compatibility:

  Firefox IE Chrome Opera Safari
Attributes / Methods          
createImageData()
getImageData()
putImageData()


Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 164 / 159131488. Delta: 0.04939 с