Manual de referência HTML

大全 de etiquetas HTML

Propriedade imgData.data do canvas HTML

propriedade 'data' do ImageData, de leitura only, que retorna Uint8ClampedArray, que descreve um array unidimensional que contém dados em ordem RGBA, usando 0 até 255representados por inteiros.

Manual de referência do canvas do HTML

exemplo online

Crie um100 * 10Objeto ImageData de 0 pixels, onde cada pixel é configurado como vermelho:

pintura na tela

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso da propriedade imgData.data no canvas HTML-Tutorial básico(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="15"  style="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 se ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9e Firefox, Opera, Chrome e Safari suportam ImageData propriedade 'data'.

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

Definição e uso

A propriedade 'data' retorna um objeto que contém os dados da imagem do objeto ImageData especificado.

Para cada pixel do objeto ImageData, há quatro 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 ()

cor/As informações alpha existem em forma de array e são armazenadas na propriedade data do objeto ImageData.

Exemplo:

A sintaxe para tornar o primeiro pixel vermelho do objeto ImageData:

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

A sintaxe para tornar o segundo pixel verde do objeto ImageData:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Dica:Ver createImageData()、getImageData() eputImageData() métodos, para obter mais informações sobre o objeto ImageData.

Sintaxe do JavaScript

Sintaxe do JavaScript:	imageData.data;

　Manual de referência do canvas do HTML

HTML: <template> etiqueta