Ejemplo
Crear un 100*100 objeto ImageData píxeles, donde cada píxel se establece en el color rojo:
Lona
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); Inténtalo tú mismo " Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| data | Sí | 9.0 | Sí | Sí | Sí |
Definición y Uso
La propiedad de datos devuelve un objeto que contiene datos de imagen del objeto ImageData especificado.
Para cada píxel de un objeto ImageData hay cuatro piezas de información, los valores RGBA:
R - El color rojo (de 0-255)
G - El color verde (de 0-255)
B - El color azul (de 0-255)
A - El canal alfa (0-255; 0 es transparente y 255 es completamente visible)
La información de color / alfa se llevó a cabo en una matriz, y se almacena en la propiedad de datos del objeto ImageData.
Ejemplos:
La sintaxis para hacer el primer pixel en las ImageData objeto rojo:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;La sintaxis para hacer el segundo píxel en el objeto verde ImageData:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;Consejo: Mira createImageData() , getImageData() , y putImageData() para obtener más información sobre el objeto ImageData.
sintaxis JavaScript
| la sintaxis de JavaScript: | imageData.data; |
|---|