El método getImageData() devuelve un objeto ImageData, que copia los datos de píxeles del rectángulo especificado del lienzo.
Nota: El objeto ImageData no es una imagen. Especifica una parte (rectángulo) del lienzo y guarda la información de cada píxel dentro del rectángulo.
Para cada píxel en el objeto ImageData, hay cuatro aspectos de información, a saber, el valor RGBA:
A - canal alfa (0-255; 0 es transparente, 255 es completamente visible)
La información de color/alfa existe en forma de matriz y se almacena en el atributo de datos del objeto ImageData.
Consejo: Después de operar con la información de color/alfa en la matriz, puede usar el método putImageData() para copiar los datos de la imagen nuevamente al lienzo.
dos codigos <!DOCTYPE html><html><head> <meta nombre=autor contenido=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Contenido-Tipo contenido=text/html; <title> Cambiar transparencia</title></head><body><h2> Cambiar transparencia</h2><canvas id=mc width=600 height=460 style=border:1px solid black></canvas><script type=text/javascript> // Obtiene el objeto DOM correspondiente al elemento del lienzo var canvas = document.getElementById('mc'); // Obtiene el objeto CanvasRenderingContext2D para dibujar en el lienzo var ctx = lienzo. getContext('2d'); var imagen = nueva Imagen(); imagen.src = prueba.png = función() { // Utilice el método con parámetros de transparencia para dibujar la imagen drawImage(image, 124, 20, 0.4 } var drawImage = function(image, x, y, alpha) { // Dibuja la imagen ctx.drawImage(image, x, y); ); // Obtenga los datos de la imagen comenzando desde x, y, con un ancho de image.width y una altura de image.height // Es decir, obtenga los datos de la imagen dibujada var imgData = ctx.getImageData(x, y, image.width, image.height for (var i = 0, len = imgData.data.length; i < len; i += 4) { // Cambiar la transparencia de cada píxel imgData.data[i + 3] = imgData.data[i + 3] * alpha; } // Devuelve los datos de la imagen obtenida. ctx.putImageData(imgData, x, y }</script></body></html>); Tres resultados consecutivosLo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.