createImageData lienzo HTML método ()
Ejemplos
Crear un objeto ImageData 100 * 100 píxeles en la que cada píxel es de color rojo, a continuación, poner en el lienzo:
JavaScript:
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);
Trate »
Soporte para el navegador
Internet Explorer 9, el método de Firefox, Opera, Chrome y Safari createImageData apoyo ().
Nota: 8 y versiones anteriores de Internet Explorer no son compatibles con el elemento <canvas>.
Definición y Uso
createImageData método () crea un nuevo objeto ImageData en blanco. El valor por defecto del nuevo negro transparente objeto de píxeles.
ImageData objeto para cada píxel, hay cuatro áreas de información, a saber, los valores RGBA:
R - rojo (0-255)
G - Verde (0-255)
B - azul (0-255)
A - canal alfa (0-255; 0 es transparente, 255 es completamente visible)
Por lo tanto, la representación negro transparente (0,0,0,0).
el color / alfa información en forma de una matriz, y puesto que la matriz contiene cuatro piezas de información para cada píxel, por lo que el tamaño de la matriz es objeto ImageData cuatro veces: ancho * alto * 4. (Tamaño de la matriz obtenida de una manera más sencilla es utilizar ImageDataObject.data.length)
Contiene el color / alfa información de la matriz almacenada en ImageData del objeto de datos propiedad.
Consejo: matriz completa de información de color / alfa en la operación, se puede utilizar putImageData () método de los datos de imagen se copia de nuevo a la lona.
Ejemplo:
Los ImageData objeto primer pixel a la sintaxis de color rojo:
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;
El segundo objeto más ImageData píxel convierte la sintaxis verde:
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;
la sintaxis de JavaScript
Hay dos versiones de método createImageData ():
1. especificar el tamaño (en píxeles) para crear un nuevo objetos ImageData:
| la sintaxis de JavaScript: | var = imgData contexto .createImageData (anchura,altura); |
|---|
2. Crear el mismo que otro tamaño del objeto ImageData nueva ImageData objeto especificado (no se copiarán los datos de imagen):
| la sintaxis de JavaScript: | var imgData = contexto .createImageData (propiedad imageData); |
|---|
parámetro Valor
| 参数 | 描述 |
|---|---|
| width | ImageData 对象的宽度，以像素计。 |
| height | ImageData 对象的高度，以像素计。 |
| imageData | 另一个 ImageData 对象。 |