Manuel de référence HTML

Tous les balises HTML

Attribut ImageData.data du canvas HTML

L'attribut ImageData.data en lecture seule, retourne Uint8ClampedArray, qui décrit un tableau unidimensionnel contenant des données en ordre RGBA, les données utilisent 0 à 255représentés par des entiers entiers.

Manuel de référence pour HTML canvas

Exemple en ligne

Créez un100 * 10Un objet ImageData de 0 pixels, où chaque pixel est réglé en rouge :

Canvas

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilisation de l'attribut imgData.data dans HTML canvas</title>-Tutoriel de base(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge le HTML5　balise 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>

Vérifiez et voyez si ‹/›

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

Internet Explorer 9et Firefox, Opera, Chrome et Safari prennent en charge ImageData Attribut data.

Remarque :Internet Explorer 8 Les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

L'attribut data retourne un objet contenant les données d'image de l'objet ImageData spécifié.

Pour chaque pixel de l'objet ImageData, il y a quatre 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)

couleur/Les informations alpha existent sous forme d'array et sont stockées dans l'attribut data de l'objet ImageData.

Exemple :

La syntaxe pour rendre le premier pixel d'un objet ImageData rouge :

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 d'un objet ImageData vert :

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

Avis :Voir createImageData()、getImageData() etputImageData() méthodes, pour en apprendre davantage sur l'objet ImageData.

Grammaire JavaScript

Grammaire JavaScript :	imageData.data;

　Manuel de référence pour HTML canvas

HTML: <template> balise