HTML canvas ImageData dataAtributos

HTML canvas 参考手册 Referencia de HTML canvas

Ejemplos

Crea un objeto ImageData de 100*100 píxeles, donde cada píxel se establece en rojo:

Canvas

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);

Pruébalo »

Compatibilidad del navegador

Internet Explorer 9, Firefox, Opera, Chrome y Safari soportan la propiedad data de ImageData.

Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.

Definición y uso

La propiedad data devuelve un objeto que contiene los datos de imagen del objeto ImageData especificado.

Para cada píxel en un objeto ImageData, existe información de cuatro aspectos, es decir, los valores RGBA:

R - Rojo (0-255)
G - Verde (0-255)
B - Azul (0-255)
A - Canal alfa (0-255; 0 es transparente, 255 es completamente visible)

La información de color/alfa se almacena en forma de matriz y se guarda en la propiedad data del objeto ImageData.

Ejemplo:

Sintaxis para cambiar el primer píxel del objeto ImageData a rojo:

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Sintaxis para cambiar el segundo píxel del objeto ImageData a verde:

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Consejo:VéasecreateImageData()、 getImageData()yputImageData()el método para obtener más información sobre el objeto ImageData.

Sintaxis de JavaScript

Sintaxis de JavaScript:	imageData.data;

Referencia de HTML canvas Otras extensiones

HTMLEtiquetas