Atributo de datos del canvas HTML

Manual de referencia de HTML5 Canvas

Definición y uso

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

Para cada píxel del objeto ImageData, existen cuatro tipos de información, es decir, los valores RGBA:

  • R - rojo (0-255)
  • G - verde (0-255)
  • B - azul (0-255)
  • A - canal alpha (0-255; 0 es transparente, 255 es completamente visible)

color/alpha existen en forma de array y se almacenan en el objeto ImageData de data propiedades.

Ejemplo:

La 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;

La 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:Ver createImageData()、getImageData() y putImageData() Métodos, para obtener más información sobre el objeto ImageData.

Ejemplo

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

Su navegador no admite la etiqueta 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);

Intente hacerlo usted mismo

Sintaxis

imageData.data;

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Nota:Los navegadores Internet Explorer 8 y anteriores no admiten el elemento <canvas>.

Manual de referencia de HTML5 Canvas