html5 - ctx - ¿Cómo cambiar la opacidad(alfa, transparencia) de un elemento en un elemento canvas después de que se ha dibujado?
canvas transparent (7)
Utilizando el elemento HTML5 <canvas> , me gustaría cargar un archivo de imagen (PNG, JPEG, etc.), dibujarlo en el lienzo de forma totalmente transparente y luego fundirlo. He descubierto cómo cargar la imagen y dibujar al lienzo, 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?
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>
<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 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 lienzo 2d. De MDN:
Puede manipular directamente datos de píxeles en lienzos 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 sintaxis putImageData:
context.putImageData (myImageData, dx, dy); // dx, dy - x y y offset en tu lienzo
Donde el contexto es su contexto del lienzo 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 lienzo
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<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'';
Puede hacer sus propios "shaders" - vea el artículo completo de MDN here
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.
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.restore();
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.restore()
};
img.src = "http://...";
Notas:
Establezca el
''src''final, para garantizar que se llame a su controlador deonloaden todas las plataformas, incluso si la imagen ya está en el caché.Envuelva los cambios en cosas como
globalAlphaentresaveyrestore(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.
Usted puede. El lienzo 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 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'';