Cómo cambiar la opacidad (alfa, transparencia) de un elemento en un elemento canvas después de que se ha dibujado?

Question

Cómo cambiar la opacidad (alfa, transparencia) de un elemento en un elemento canvas después de que se ha dibujado?

Usando el elemento HTML5 <canvas>, me gustaría cargar un archivo de imagen (PNG, JPEG, etc.).), dibujarlo en el lienzo de forma completamente transparente,y luego desvanecerlo. He descubierto cómo cargar la imagen y dibujarla en el lienzo, pero no se cómo cambiar su opacidad una vez que ha sido dibujada.

Aquí está el código que tengo hasta ahora:

var canvas = document.getElementById('myCanvas');

if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;

    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

¿Podría alguien indicarme en la dirección correcta como una propiedad a establecer o una función a llamar que cambiará la opacidad?

173

html5 canvas opacity transparency alpha

Author: vaxquis, 2010-03-02

Source

7 answers

Un código de ejemplo más simple para usar globalAlpha:

ctx.save();
ctx.globalAlpha = 0.4;
ctx.drawImage(img, x, y);
ctx.restore();

Si necesita img que se cargue:

var img = new Image();
img.onload = function() {
    ctx.save();
    ctx.globalAlpha = 0.4;
    ctx.drawImage(img, x, y);
    ctx.restore()
};
img.src = "http://...";

Notas:

Establezca el 'src' last, para garantizar que su controlador onload se llame en todas las plataformas, incluso si la imagen ya está en la caché.
Wrap cambia a cosas como globalAlpha entre save y restore (de hecho, úsalos mucho), para asegurarse de no clobber configuraciones de otros lugares, particularmente cuando bits de código de dibujo van a ser llamada desde eventos.

103

Author: Ian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-05 11:37:15

Editar: ~~La respuesta marcada como "correcta" no es correcta.~~

Es fácil de hacer. Pruebe este código, intercambiando " ie.jpg " con cualquier imagen que tenga a mano:

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var canvas;
            var context;
            var ga = 0.0;
            var timerId = 0;

            function init()
            {
                canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                timerId = setInterval("fadeIn()", 100);
            }

            function fadeIn()
            {
                context.clearRect(0,0, canvas.width,canvas.height);
                context.globalAlpha = ga;
                var ie = new Image();
                ie.onload = function()
                {
                    context.drawImage(ie, 0, 0, 100, 100);
                };
                ie.src = "ie.jpg";

                ga = ga + 0.1;
                if (ga > 1.0)
                {
                    goingUp = false;
                    clearInterval(timerId);
                }
            }
        </script>
    </head>
    <body onload="init()">
        <canvas height="200" width="300" id="myCanvas"></canvas>
    </body>
</html>

La clave es la propiedad globalAlpha.

Probado con IE 9, FF 5, Safari 5 y Chrome 12 en Win7.

14

Author: james.garriss,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-23 14:21:50

El post es viejo hasta ahora voy a ir con mi sugerencia. La sugerencia se basa en la manipulación de píxeles en el contexto canvas 2d. De MDN:

Puede manipular directamente los datos de píxeles en lienzos a nivel de bytes

Para manipular píxeles usaremos dos funciones aquí: getImageData y putImageData

Uso de la función getImageData:

Var myImageData = context.getImageData (izquierda, arriba, ancho, alto);

Y sintaxis de putImageData:

Contexto.putImageData (myImageData, dx, dy); //desplazamiento dx, dy - x e y en su lienzo

Donde context es su lienzo 2d context

Así que para obtener los valores rojo, verde, azul y alfa, haremos lo siguiente:

var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];

Donde x es x offset, y es y offset sobre lienzo

Así que tenemos código haciendo imagen medio transparente

var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload  = function() {
   c.drawImage(img, 0, 0);
   var ImageData = c.getImageData(0,0,img.width,img.height);
   for(var i=0;i<img.height;i++)
      for(var j=0;j<img.width;j++)
         ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
   c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';

Puedes hacerte dueño de "shaders" - ver el artículo completo de MDN aquí

11

Author: Soul_man,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-24 23:18:31

Puedes. El lienzo transparente se puede desvanecer rápidamente utilizando destination-out global composite operation. No es 100% perfecto, a veces deja algunos rastros, pero podría ser ajustado, dependiendo de lo que se necesite (es decir, use 'source-over' y llénelo de color blanco con alfa a 0.13, luego desvanezca para preparar el lienzo).

// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';

7

Author: Og2t,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-29 09:55:37

Si usa la biblioteca jCanvas puede usar la propiedad opacity al dibujar. Si necesita un efecto de desvanecimiento además de eso, simplemente vuelva a dibujar con diferentes valores.

-2

Author: cen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-09 00:06:44

No puedes. Son gráficos de modo inmediato. Pero se puede simular dibujando un rectángulo sobre él en el color de fondo con una opacidad.

Si la imagen está sobre algo que no sea un color constante, entonces se vuelve un poco más complicada. Usted debe ser capaz de utilizar los métodos de manipulación de píxeles en este caso. Simplemente guarde el área antes de dibujar la imagen, y luego mezcle eso de nuevo en la parte superior con una opacidad después.

-11

Author: MPG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-03-16 18:47:15

score 268 · Accepted Answer

También estoy buscando una respuesta a esta pregunta, (para aclarar, quiero poder dibujar una imagen con opacidad definida por el usuario, como cómo puede dibujar formas con opacidad) si dibuja con formas primitivas, puede establecer el color de relleno y trazo con alfa para definir la transparencia. Por lo que he llegado a la conclusión en este momento, esto no parece afectar el dibujo de la imagen.

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

He llegado a la conclusión de que establecer el globalCompositeOperation funciona con imágenes.

//works with images
ctx.globalCompositeOperation = "lighter";

Me pregunto si hay algún tipo tercera forma de configurar el color para que podamos teñir las imágenes y hacerlas transparentes fácilmente.

EDITAR:

Después de investigar más, he llegado a la conclusión de que puede establecer la transparencia de una imagen configurando el parámetro globalAlpha ANTES de dibujar la imagen:

//works with images
ctx.globalAlpha = 0.5

Si desea lograr un efecto de desvanecimiento con el tiempo necesita algún tipo de bucle que cambie el valor alfa, esto es bastante fácil, una forma de lograrlo es la función setTimeout, busque eso para crear un bucle desde que alteras el alfa con el tiempo.