Ejemplo
Crear un objeto ImageData 100 * 100 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 del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| data | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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 (from 0-255)
G - El color verde (from 0-255)
B - El color azul (from 0-255)
A - El canal alfa (from 0-255; 0 is transparent and 255 is fully visible)
La información de color / alfa se lleva a cabo en una matriz, y se almacena en la propiedad de datos del objeto ImageData.
Examples:
La sintaxis para hacer el primer píxel en los 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 que el segundo píxel en el verde objeto ImageData:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;Tip: Mira createImageData() , getImageData() , y putImageData() para aprender más sobre el objeto ImageData.
sintaxis JavaScript
| la sintaxis de JavaScript: | imageData .data; |
|---|
<Objeto Canvas