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

Utilizando el elemento HTML5 , me gustaría cargar un archivo de imagen (PNG, JPEG, etc.), dibujarlo en el canvas de forma totalmente transparente y luego fundirlo. He descubierto cómo cargar la imagen y dibujar al canvas, pero no sé cómo cambiar su opacidad una vez que ha sido dibujado.

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'; } 

¿Alguien puede señalarme en la dirección correcta como una propiedad para establecer o una función para llamar que cambiará la opacidad?

    También estoy buscando una respuesta a esta pregunta (para aclarar, quiero ser capaz de dibujar una imagen con opacidad definida por el usuario, como cómo dibujar formas con opacidad) si dibujas con formas primitivas puedes establecer el relleno y el trazo color con alfa para definir la transparencia. Hasta donde he llegado ahora, 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 la configuración de globalCompositeOperation funciona con imágenes.

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

    Me pregunto si existe algún tipo de tercera forma de configuración del color para que podamos matizar las imágenes y hacerlas transparentes con facilidad.

    EDITAR:

    Después de seguir excavando, 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 el cual altere el alfa a través del tiempo.

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

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

    Si necesita img para ser cargado:

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

    Notas:

    • Establezca el 'src' final, para garantizar que se llame a su controlador de onload en todas las plataformas, incluso si la imagen ya está en el caché.

    • Envuelva los cambios en cosas como globalAlpha entre save y restre (de hecho, globalAlpha ), para asegurarse de no cambiar las configuraciones de otro lugar, particularmente cuando los bits del código de dibujo van a ser llamados desde eventos.

    Editar: La respuesta marcada como “correcta” no es correcta.

    Es facil de hacer. Pruebe este código, intercambiando “ie.jpg” con cualquier imagen que tenga a mano:

     < !DOCTYPE HTML>         

    La clave es la propiedad global Alfa.

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

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

    Puede manipular directamente datos de píxeles en canvass en el 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 la syntax putImageData:

    context.putImageData (myImageData, dx, dy); // dx, dy – x y y offset en tu canvas

    Donde el contexto es su contexto del canvas 2d

    Entonces, para obtener los valores rojos, verdes, azules 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 en canvas

    Entonces tenemos una imagen de creación de código 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 

    Puede hacer sus propios "shaders" - vea el artículo completo de MDN aquí

    Usted puede. El canvas transparente se puede desvanecer rápidamente mediante el uso de la operación compuesta global de salida de destino . No es 100% perfecto, a veces deja algunas trazas, pero podría modificarse, dependiendo de lo que se necesite (es decir, use ‘fuente-sobre’ y llénelo de color blanco con alfa a 0.13, luego descolore para preparar el canvas).

     // 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'; 

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

    No puedes. Son gráficos de modo inmediato. Pero puede simularlo 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 complicado. Debería poder utilizar los métodos de manipulación de píxeles en este caso. Simplemente guarde el área antes de dibujar la imagen y luego vuelva a combinarla con una opacidad después.