Atributo de datos de Canvas

Definición y uso

data La propiedad devuelve un objeto que contiene los datos de 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 existe en forma de array y se almacena en el objeto ImageData data propiedad.

Ejemplo:

La sintaxis para cambiar el primer píxel del objeto ImageData a rojo es:

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 es:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Consejo:Vea createImageData(),getImageData() y putImageData() Métodos, para obtener más información sobre el objeto ImageData.

Ejemplo

Cree un objeto ImageData de 100*100 píxeles, en el que 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);

亲自试一试

语法

imageData.data;

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

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

Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.