HTML5 Canvas

Hochwertiger HTML5 und Javascript Code von dem Designbüro Standardabweichung aus München

HTML5 Canvas - Context 2D - Pixel Manipulation (Javascript) / Designbüro München

Pixel Manipulation

var canvas = document.getElementById('CONTAINER ID');
var context = canvas.getContext('2d');

var width = canvas.width;
var height = canvas.height;

//ImageData Auslesen
var imageData = context.getImageData(0, 0, width, height);

var imageData_width = imageData.width;
var imageData_height = imageData.height;
var imageData_data = imageData.data;

//ImageData Modifizieren
var setPixel = function (x, y, r, g, b, a) {
	var index = (x + y * width) * 4;
	imageData.data[index] = r;
	imageData.data[index + 1] = g;
	imageData.data[index + 2] = b;
	imageData.data[index + 3] = a;
}

var getPixel = function (x, y) {
	var index = (x + y * width) * 4;
	var pixel = {
	    r: imageData.data[index],
	    g: imageData.data[index + 1],
	    b: imageData.data[index + 2],
	    a: imageData.data[index + 3]
	}
	
	return pixel;
}

//ImageData Schreiben
context.putImageData(imageData, 0, 0);

//ImageData Erzeugen
var imageData_blank = context.createImageData(100,100);

HTML5 / Javascript Code Teilen

Facebook
Google+

Standardabweichung

ProjekteCodeKontaktBlog

HTML5 Canvas

Context2D Drawing

Context2D Style

Context2D Composition

Context2D Transformation

Math

Time / Motion

Multimedia

Interactivity

Conversion

GLSL Functions

Hochwertiger HTML5 und Javascript Code von dem Designbüro Standardabweichung aus München

HTML5 Canvas - Context 2D - Pixel Manipulation (Javascript) / Designbüro München

Pixel Manipulation

HTML5 / Javascript Code Teilen

Projekte Code Kontakt Blog