HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML kanvas erstellenImageData() Methode

createImageData() ist Canvas 2D API erstellt ein neues, leeres, auf eine bestimmte Größe festgelegtes ImageData-Objekt. Alle Pixel im neuen Objekt sind transparent.

HTML canvas reference manual

Online-Beispiel

Erstellen Sie ein100 * 100-Pixel-ImageData-Objekt, bei dem jeder Pixel rot ist, und legen Sie es dann auf das Canvas:

Beispiel

<!DOCTYPE	html>
<html>
<head>
<meta	charset="utf-8">
<title>HTML	kanvas
erstellenImageData()Methode verwenden-Grund教程(oldtoolbag.com)</title>
</head>
<body>
<canvas	id="myCanvas"	wert="300"	höhe="150" style="border:1px solid #d3d3d3>
Ihr Browser unterstützt nicht HTML5　canvas-Tag.
</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>

Testen Sie heraus, ob ‹/›

Browser-Kompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome und Safari unterstützen createImageData() Methode.

Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Definition und Verwendung

Die Methode createImageData() erstellt einen neuen leeren ImageData-Objekt. Der Standardwert der Pixel ist transparent black.

Für jeden Pixel im ImageData-Objekt gibt es vier Arten von Informationen, nämlich die RGBA-Werte:

R - Rot (0-255）
G - Grün (0-255）
B - Blau (0-255）
A - Alpha-Kanal (0-255; 0 ist transparent,255 ist vollständig sichtbar）

Daher steht transparent black für (0,0,0,0).

color/Das alpha-Informationen-Array ist in Form eines Arrays vorhanden und da das Array vier Informationen pro Pixel enthält, ist die Größe des Arrays viermal so groß wie die des ImageData-Objekts: width*height*4。（Es gibt eine einfachere Methode, um die Größe des Arrays zu erhalten, indem Sie ImageDataObject.data.length verwenden）

enthalten color/Das alpha-Informationen-Array wird im ImageData-Objekt gespeichert data Eigenschaft verwenden.

Hinweis:in den color/Nachdem Sie die alpha-Informationen hinzugefügt haben, können Sie putImageData() Der Methodenaufruf kopiert die Bilddaten zurück auf die Leinwand.

Beispiel:

Die Syntax, um den ersten Pixel eines ImageData-Objekts in Rot zu ändern:

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

Syntax to change the second pixel in the ImageData object to green:

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

JavaScript syntax

There are two versions of the createImageData() method:

1. Creates a new ImageData object with the specified size (in pixels):

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

2. Creates a new ImageData object with the same size as the specified another ImageData object (without copying image data):

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

Parameter value

Parameter	Description
width	The width of the ImageData object, in pixels.
height	The height of the ImageData object, in pixels.
imageData	Another ImageData object.

　HTML canvas reference manual

HTML: <template> Tag