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