Ferramentas online

Manual de referência

: etiqueta <progress>

Método createImageData() do canvas HTML 2O método createImageData() é do Canvas

Exemplo online

Crie um100 * 10Crie um objeto ImageData de 0 pixels, onde cada pixel é vermelho, e coloque-o no canvas:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uso do método createImageData() no canvas HTML-Tutorial básico(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" largura="300" altura="150" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta 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>

Teste para ver ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome e Safari suportam createImageData() método.

Atenção:Internet Explorer 8 e as versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método createImageData() cria um novo objeto ImageData em branco. O valor padrão dos pixels do novo objeto é black transparent.

Para cada pixel do objeto ImageData, existem quatro tipos de informações, ou seja, os valores RGBA:

R - vermelho (0-255)
G - verde (0-255)
B - azul (0-255)
A - canal alpha (0-255; 0 é transparente,255 é completamente visível)

Portanto, black transparente representa (0,0,0,0).

color/As informações alpha existem na forma de array e, como o array contém quatro informações para cada pixel, o tamanho do array é quatro vezes o tamanho do objeto ImageData: width*height*4。（Há uma maneira mais simples de obter o tamanho do array, usando ImageDataObject.data.length）

contendo color/O array de informações alpha é armazenado no objeto ImageData, data nas propriedades.

Dica:na operação concluída no array de color/Depois de obter a informação alpha, você pode usar putImageData() O método copia os dados da imagem de volta para o canvas.

Exemplo:

A sintaxe para transformar o primeiro pixel do objeto ImageData em vermelho é:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1=0;
imgData.data[2=0;
imgData.data[3]=255;

A sintaxe para mudar o segundo pixel do objeto ImageData para 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 método createImageData():

1. Cria um novo objeto ImageData com o tamanho especificado (em pixels):

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

2. Cria um novo objeto ImageData do mesmo tamanho que outro objeto ImageData existente (não copia os dados da imagem):

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

Valor do parâmetro

Parâmetro	Descrição
width	Largura do objeto ImageData, em pixels.
height	Altura do objeto ImageData, em pixels.
imageData	Outro objeto ImageData.

　Manual de referência do canvas HTML

HTML: <template> tag