Latest web development tutorials

createImageData tela HTML () Método

HTML Manual de lona Referência HTML Manual de lona Referência

Exemplos

Criar um ImageData objeto 100 * 100 pixels em que cada pixel é vermelha, em seguida, colocá-lo na tela:

YourbrowserdoesnotsupporttheHTML5canvastag.

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

tente »

Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari apoio createImageData () método.

Nota: 8 e versões anteriores do Internet Explorer não suportam o elemento <canvas>.

Definição e Uso

createImageData () método cria um novo objeto ImageData em branco. O valor padrão do novo objeto pixel preto transparente.

ImageData objeto para cada pixel, existem quatro áreas de informação, ou seja, valores RGBA:

R - vermelha (0-255)
G - Verde (0-255)
B - azul (0-255)
A - canal alfa (0-255; 0 é transparente, 255 é totalmente visível)

Assim, a representação transparente preto (0,0,0,0).

cor / alfa informações sob a forma de uma matriz, e uma vez que a matriz contém quatro peças de informação para cada pixel, de modo que o tamanho da matriz é objecto ImageData quatro vezes: largura altura * * 4. (Tamanho da matriz obtida de maneira mais simples é usar ImageDataObject.data.length)

Ele contém cor / alpha informações de matriz ImageData armazenado no objeto de dados propriedade.

Dica: gama completa de informações de cor / alpha na operação, você pode usar putImageData () método dos dados da imagem são copiados de volta para a tela.

exemplo:

Os ImageData objeto primeiro pixel a sintaxe vermelho:

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

O objeto ImageData segundo pixel transforma sintaxe verde:

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

sintaxe JavaScript

Existem duas versões do createImageData () Método:

1. especificar o tamanho (em pixels) para criar uma nova objetos ImageData:

sintaxe JavaScript: var imgData = contexto .createImageData (largura,altura);

2. Criar o mesmo que outro tamanho do objeto ImageData nova ImageData objeto especificado (dados de imagem não será copiada):

sintaxe JavaScript: var imgData = contexto .createImageData (imageData);

parâmetro Valor

参数 描述
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
imageData 另一个 ImageData 对象。

HTML Manual de lona Referência HTML Manual de lona Referência