La méthode getImageData() renvoie un objet ImageData, qui copie les données de pixels du rectangle spécifié du canevas.
Remarque : L'objet ImageData n'est pas une image. Il spécifie une partie (rectangle) du canevas et enregistre les informations de chaque pixel dans le rectangle.
Pour chaque pixel de l'objet ImageData, il existe quatre aspects d'information, à savoir la valeur RGBA :
A - canal alpha (0-255 ; 0 est transparent, 255 est entièrement visible)
Les informations couleur/alpha existent sous la forme d'un tableau et sont stockées dans l'attribut data de l'objet ImageData.
Astuce : Après avoir opéré sur les informations de couleur/alpha dans le tableau, vous pouvez utiliser la méthode putImageData() pour recopier les données de l'image sur le canevas.
Deux codes <!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html; <title> Changer la transparence</title></head><body><h2> Changer la transparence</h2><canvas id=mc width=600 height=460 style=border:1px solid black></canvas><script type=text/javascript> // Récupère l'objet DOM correspondant à l'élément canevas var canvas = document.getElementById('mc'); // Récupère l'objet CanvasRenderingContext2D pour dessiner sur canevas var ctx = canvas.getContext('2d'); var image = new Image(); image.src = test.png = function() { // Utilisez la méthode avec les paramètres de transparence pour dessiner l'image drawImage(image, 124, 20, 0.4); } var drawImage = function(image, x, y, alpha) { // Dessinez l'image ctx.drawImage(image, x, y ); / / Récupère les données d'image à partir de x, y, avec une largeur de image.width et une hauteur de image.height // Autrement dit, récupère les données d'image dessinées var imgData = ctx.getImageData(x, y, image.width, image.height); for (var i = 0, len = imgData.data.length; i < len; i += 4) { // Changer la transparence de chaque pixel imgData.data[i + 3] = imgData.data[i + 3] * alpha; } // Remettez les données d'image obtenues. ctx.putImageData(imgData, x, y); }</script></body></html> Trois résultats en coursCe qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.