Latest web development tutorials

méthode toile HTML createImageData ()

HTML Manuel toile de référence HTML Manuel toile de référence

Exemples

Créer un objet ImageData 100 * 100 pixels dans laquelle chaque pixel est rouge, puis le mettre sur la toile:

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

Essayez »

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, la méthode Firefox, Opera, Chrome et Safari soutien createImageData ().

Note: 8 et versions antérieures d'Internet Explorer ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

méthode createImageData () crée un nouvel objet ImageData vide. La valeur du nouvel objet pixel noir transparent par défaut.

ImageData objet pour chaque pixel, il existe quatre domaines de l'information, à savoir les valeurs RGBA:

R - rouge (0-255)
G - Green (0-255)
B - bleu (0-255)
A - canal alpha (0-255; 0 est transparent, 255 est entièrement visible)

Ainsi, la représentation en noir transparent (0,0,0,0).

couleur / information alpha sous la forme d'un tableau, et puisque le tableau contient quatre éléments d'information pour chaque pixel, de sorte que la taille du tableau est un objet ImageData quatre fois: largeur * hauteur * 4. (Taille de la matrice obtenue d'une manière plus simple consiste à utiliser ImageDataObject.data.length)

Il contient de la couleur / alpha informations de tableau ImageData stocké dans de l'objet de données de la propriété.

Astuce: array complète de l' information couleur / alpha dans l'opération, vous pouvez utiliser putImageData () méthode des données d'image est copiée vers la toile.

exemple:

Les ImageData objet premier pixel à la syntaxe rouge:

imgData=ctx.createImageData(100,100);

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

L'objet ImageData second pixel devient syntaxe verte:

imgData=ctx.createImageData(100,100);

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

syntaxe JavaScript

Il existe deux versions de createImageData () méthode:

1. spécifier la taille (en pixels) pour créer un nouveau objets ImageData:

Syntaxe JavaScript: var imgData = contexte .createImageData (largeur,hauteur);

2. Créez le même que l'autre taille de l'objet ImageData nouveau ImageData objet spécifié (données d'image ne seront pas copiés):

Syntaxe JavaScript: var imgData = contexte .createImageData (imageData);

Paramètre Valeur

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

HTML Manuel toile de référence HTML Manuel toile de référence