Propiedad de datos de datos de imagen de lienzo HTML
Ejemplo
Cree un objeto ImageData de 100*100 píxeles en el que cada píxel esté configurado en color rojo:
Lienzo
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);
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| 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.
Por cada píxel en un objeto ImageData hay cuatro piezas de información, los valores RGBA:
R - El color rojo (de 0 a 255)
G - El color verde (de 0 a 255)
B - El color azul (de 0 a 255)
A - El canal alfa (de 0 a 255; 0 es transparente y 255 es completamente visible)
La información de color/alfa se mantiene en una matriz y se almacena en la propiedad de datos del objeto ImageData.
Ejemplos:
La sintaxis para hacer rojo el primer píxel en el objeto ImageData:
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 verde el segundo píxel en el objeto ImageData:
imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;
Sugerencia: consulte createImageData () , getImageData() y putImageData() para obtener más información sobre el objeto ImageData.
Sintaxis JavaScript
| Sintaxis de JavaScript: | datos de imagen .datos ; |
|---|
❮ Objeto de lienzo