Latest web development tutorials

Metodo canvas HTML createImageData ()

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento

Esempi

Creare un oggetto ImageData 100 * 100 pixel in cui ogni pixel è di colore rosso, poi metterlo sulla 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);

Prova »

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer metodo 9, Firefox, Opera, Chrome e Safari supporto createImageData ().

Nota: 8 e versioni precedenti di Internet Explorer non supportano l'elemento <canvas>.

Definizione e utilizzo

Metodo createImageData () crea un nuovo oggetto ImageData vuoto. Il valore di default del nuovo nero trasparente oggetto pixel.

ImageData oggetto per ogni pixel, ci sono quattro aree di informazioni, vale a dire i valori RGBA:

R - rosso (0-255)
G - verde (0-255)
B - blu (0-255)
A - canale alfa (0-255; 0 è trasparente, 255 è completamente visibile)

Così, la rappresentazione nero trasparente (0,0,0,0).

colore / informazioni alpha in forma di matrice, e poiché l'array contiene quattro informazioni per ogni pixel, per cui la dimensione della matrice è oggetto ImageData quattro volte: larghezza * altezza * 4. (Dimensione array ottenuto un modo più semplice è quello di utilizzare ImageDataObject.data.length)

Esso contiene il colore / alpha informazioni serie ImageData memorizzate nel dell'oggetto dei dati di proprietà.

Suggerimento: gamma completa di informazioni sul colore / alfa nel funzionamento, è possibile utilizzare putImageData () il metodo dei dati di immagine viene copiata torna alla tela.

esempio:

I ImageData oggetto primo pixel di sintassi rosso:

imgData=ctx.createImageData(100,100);

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

Il ImageData oggetto secondo pixel diventa sintassi verde:

imgData=ctx.createImageData(100,100);

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

sintassi JavaScript

Ci sono due versioni di createImageData () metodo:

1. specificare le dimensioni (in pixel) per creare un nuovo oggetto imageData:

sintassi JavaScript: var = imgData contesto .createImageData (larghezza,altezza);

2. Creare lo stesso di un altro formato oggetto ImageData nuovo ImageData oggetto specificato (dati di immagine non saranno copiati):

sintassi JavaScript: var = imgData contesto .createImageData (imageData);

Valore parametro

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

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento