Die Methode getImageData() gibt ein ImageData-Objekt zurück, das die Pixeldaten des angegebenen Rechtecks der Leinwand kopiert.
Hinweis: Das ImageData-Objekt ist kein Bild. Es gibt einen Teil (Rechteck) der Leinwand an und speichert die Informationen jedes Pixels innerhalb des Rechtecks.
Für jedes Pixel im ImageData-Objekt gibt es vier Informationsaspekte, nämlich den RGBA-Wert:
A – Alphakanal (0–255; 0 ist transparent, 255 ist vollständig sichtbar)
Die Farb-/Alphainformationen liegen in Form eines Arrays vor und werden im Datenattribut des ImageData-Objekts gespeichert.
Tipp: Nachdem Sie die Farb-/Alphainformationen im Array bearbeitet haben, können Sie die Methode putImageData() verwenden, um die Bilddaten zurück auf die Leinwand zu kopieren.
Zwei Codes <!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html; charset=GBK /> <title> Transparenz ändern</title></head><body><h2> Transparenz ändern</h2><canvas id=mc width=600 height=460 style=border:1px solid black></canvas><script type=text/javascript> // Holen Sie sich das DOM-Objekt, das dem Canvas-Element entspricht, var canvas = document.getElementById('mc'); // Holen Sie sich das CanvasRenderingContext2D-Objekt zum Zeichnen auf der Leinwand var ctx = Canvas. getContext('2d'); var image = new Image(); image.src = test.png; Verwenden Sie die Methode mit Transparenzparametern, um das Bild zu zeichnen ); // Holen Sie sich die Bilddaten beginnend bei x, y, mit einer Breite von image.width und einer Höhe von image.height // Das heißt, Sie erhalten die gezeichneten Bilddaten var imgData = ctx.getImageData(x, y, image.width, image.height); for (var i = 0, len = imgData.data.length; i < len; i += 4) { // Jedes Pixel ändern Transparenz imgData.data[i + 3] = imgData.data[i + 3] * alpha; } // Die erhaltenen Bilddaten zurücksetzen. ctx.putImageData(imgData, x, y); }</script></body></html> Drei LaufergebnisseDas Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.