dibujar imagen con opacidad en un lienzo [duplicate]

1 minuto de lectura

Tengo una imagen. yo suelo drawImage() para dibujarlo en un lienzo.

Mi pregunta es: si la imagen tiene una opacidad de 0.4, ¿cómo la dibujo con la misma opacidad en el lienzo?

he creado una muestra violín aquí. como puedo dibujar #scream sobre mycanvas manteniendo 0.4 de opacidad en la imagen.

html:

<p>Image with 0.4 opacity to be used:</p>
<img id="scream" width="200" height="200" src="http://img42.com/NMMU8+">

<p>Canvas:</p>
<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
</canvas>

CSS:

#scream{
    opacity: 0.4;
}
#myCanvas{
    background-color: #f60;
}

js:

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
}

  • Puedes hacerlo usando ctx.globalAlphaconsulte la posible pregunta duplicada.

    –Spencer Wieczorek

    29 de julio de 2015 a las 18:47

Avatar de usuario de Puni
Puni

Usar globalAlpha pero asegúrese de configurarlo antes de dibujar la imagen:

ctx.globalAlpha = 0.4;

  • ¿Cómo puedo agregar solo un ctx?

    –Narendra Solanki

    27 oct 2017 a las 10:20

  • @NarendraSolanki Si entiendo tu comentario correctamente, podrías usar save() y restore() antes y después respectivamente para evitar que todo lo que dibuje después use el mismo valor alfa establecido aquí.

    – Ibrahim

    13 de enero de 2018 a las 14:15

  • dulce madre de la medianoche, ¡nunca supe que podrías hacer esto! Ahorra mucho dolor de cabeza con contenedores de aislamiento de estilo sobre contenedores y lienzos superpuestos… Realmente debería leer los documentos la próxima vez XD

    – CCJ

    29 de noviembre de 2020 a las 4:32

¿Ha sido útil esta solución?