Manual de referencia HTML

Completas etiquetas HTML

Método createImageData() en canvas HTML

createImageData() es un método de Canvas 2D API crea un nuevo objeto ImageData vacío y de tamaño especificado. Todos los píxeles en el nuevo objeto son transparentes.

Manual de referencia de canvas HTML

Ejemplo en línea

Crear un100 * 10Crear un objeto ImageData de 0 píxeles, donde cada píxel es rojo, y luego colocarlo en el lienzo:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso del método createImageData() en canvas HTML-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" alt="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas.
</canvas>
<script>
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);
</script>
</body>
</html>

Prueba para ver ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome y Safari admiten createImageData() método.

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

Definición y uso

El método createImageData() crea un nuevo objeto ImageData en blanco. El valor predeterminado de los píxeles del nuevo objeto es black transparent.

Para cada píxel del objeto ImageData, hay cuatro aspectos 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)

Por lo tanto, black transparente representa (0,0,0,0).

color/La información alpha existe en forma de array y, ya que el array contiene cuatro información de cada píxel, el tamaño del array es cuatro veces el tamaño del objeto ImageData: width*height*4。（Hay una manera más sencilla de obtener el tamaño del array, es usar ImageDataObject.data.length）

que contiene el color/El array de información alpha se almacena en el objeto ImageData data propiedad.

Consejo:en la propiedad del color del array terminado./Después de la información alpha, puede usar putImageData() El método copia los datos de la imagen de vuelta al lienzo.

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 de un 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;

Sintaxis de JavaScript

Hay dos versiones del método createImageData():

1. Crea un nuevo objeto ImageData con las dimensiones especificadas (en píxeles):

Sintaxis de JavaScript:	var imgData=context.createImageData(width,height);

2. Crea un nuevo objeto ImageData del mismo tamaño que otro objeto ImageData existente (sin copiar los datos de la imagen):

Sintaxis de JavaScript:	var imgData=context.createImageData(imageData);

Valor del parámetro

Parámetros	Descripción
width	Anchura del objeto ImageData, en píxeles.
height	Altura del objeto ImageData, en píxeles.
imageData	Otro objeto ImageData.

　Manual de referencia de canvas HTML

HTML: <template> etiqueta