Attribut de données HTML canvas

Manuel de référence du canvas HTML5

Définition et utilisation

data La propriété retourne un objet contenant les données d'image de l'objet ImageData spécifié.

Pour chaque pixel de l'objet ImageData, il existe quatre types d'informations, à savoir les valeurs RGBA :

  • R - Rouge (0-255)
  • G - Vert (0-255)
  • B - Bleu (0-255)
  • A - canal alpha (0-255; 0 est transparent, 255 est complètement visible)

Les couleurs/alpha existent sous forme d'array et sont stockées dans l'objet ImageData, data Propriété.

Exemple :

La syntaxe pour rendre le premier pixel rouge de l'objet ImageData :

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

La syntaxe pour rendre le deuxième pixel vert de l'objet ImageData :

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

Astuce :Voir également createImageData()、getImageData() et putImageData() Méthode, pour en savoir plus sur l'objet ImageData.

Exemple

Créer un objet ImageData de 100*100 pixels, où chaque pixel est réglé en rouge : :

Votre navigateur ne prend pas en charge la balise canvas.

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

Essayer par vous-même

Syntaxe

imageData.data;

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

Manuel de référence du canvas HTML5