HTML 参考手册

HTML 标签大全

HTML canvas createImageData() 方法

createImageData() 是 Canvas 2D API 创建一个新的、空白的、指定大小的 ImageData 对象。所有的像素在新对象中都是透明的。

在线示例

创建一个100 * 100像素的ImageData对象，其中每个像素均为红色，然后将其放在画布上：

示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　createImageData()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge le HTML5　étiquette 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>

Testez pour voir ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome et Safari prennent en charge createImageData() méthode.

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

Définition et utilisation

La méthode createImageData() crée un nouveau ImageData object vierge. La valeur par défaut des pixels de l'objet est black transparent.

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 - le canal alpha (0-255; 0 est transparent,255 est complètement visible）

Donc, black transparent représente (0,0,0,0).

color/L'information alpha existe sous forme d'array, et en raison de l'array contenant les quatre informations de chaque pixel, la taille de l'array est quadruple de celle de l'objet ImageData : width*height*4。（Il y a un moyen plus simple d'obtenir la taille de l'array, c'est d'utiliser ImageDataObject.data.length）

contient color/L'array d'information alpha est stocké dans l'objet ImageData à data dans les propriétés.

Astuce :dans l'array du color/Après l'information alpha, vous pouvez utiliser putImageData() La méthode copie les données d'image sur le canvas.

Exemple :

La syntaxe pour changer le premier pixel de l'objet ImageData en 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 de l'objet ImageData vert :

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

Syntaxe JavaScript

Il y a deux versions de la méthode createImageData() :

1. Crée un nouveau objet ImageData avec les dimensions spécifiées (en pixels) :

Syntaxe JavaScript :	var imgData=context.createImageData(width,height);

2. Crée un nouveau objet ImageData de la même taille que l'autre ImageData spécifiée (sans copier les données d'image) :

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

Valeur du paramètre

Paramètres	Description
width	Largeur de l'objet ImageData, en pixels.
height	Hauteur de l'objet ImageData, en pixels.
imageData	Un autre objet ImageData.

　Manuel de référence HTML canvas

HTML: <template> balise