javascript - triangle - figuras canvas html5

rgba fillStyle con alpha no se vuelve completamente opaco si se aplica varias veces

Question

Me tropecé con un problema extraño. El siguiente código hace que la imagen se desvanezca porque está sobregirada por un rectificador semiopaco una y otra vez.

Pero al menos en la décima iteración de draw(); la imagen debe estar completamente sobregirada, porque el rect debe ser completamente opaco para entonces, ¿verdad? Pero en realidad nunca desaparece por completo.

Este efecto es peor en Chrome que en Firefox. Pero cuidado: las malas pantallas pueden ocultar este comportamiento defectuoso =)

También hice una demostración en jsFiddle.

$(function () {
var canvas = $("#mycanvas"),
    ctx = canvas[0].getContext("2d"),
    imgUrl = "http://it-runde.de/dateien/2009/august/14/25.png";


var image = new Image();  
image.src = imgUrl ;  
$(image).load(function() {
    ctx.drawImage(image, 0, 0, canvas.width(), canvas.height());
    draw();
});

function draw() {        
    ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
    ctx.fillRect(0,0,canvas.width(),canvas.height());
    setTimeout(draw, 100);

}    
});

El efecto que uno puede querer lograr es que, por ejemplo, un objeto se mueva por todo el lienzo, y las posiciones ya dibujadas se sobregiren ligeramente, por lo que el efecto After-fade se verá reflejado. Pero este resultado es simplemente fugly.

Entonces, ¿hay alguna solución para esto?

Answer 1

Como el rectángulo es solo un 10% opaco, el resultado de dibujarlo sobre la imagen es un compuesto del 90% de la imagen y el 10% de blanco. Cada vez que lo dibuja, pierde el 10% de la iteración anterior de la imagen; el rectángulo en sí no se vuelve más opaco. (Para obtener ese efecto, necesitaría colocar otro objeto sobre la imagen y animar su opacidad). Entonces, después de 10 iteraciones, todavía tiene (0.9^10) o aproximadamente el 35% de la imagen original. Tenga en cuenta que los errores de redondeo probablemente se establecerán después de aproximadamente 30 iteraciones.

Answer 2

La razón fue perfectamente establecida antes. No es posible deshacerse de él sin borrarlo y volver a dibujarlo como ya ha dicho @Sam.

Lo que puede hacer para compensarlo un poco es establecer globalCompositeOperation .

Hay varias operaciones que ayudan. De mis pruebas puedo decir que hard-light funciona mejor para fondos oscuros y el trabajo más lighter mejor para fondos brillantes. Pero esto depende mucho de tu escena.

Un ejemplo de hacer senderos en negro "cerca"

ctx.globalCompositeOperation = ''hard-light''
ctx.fillStyle = ''rgba(20,20,20,0.2)'' // The closer to black the better
ctx.fillRect(0, 0, width, height)

ctx.globalCompositeOperation = ''source-over'' // reset to default value

Answer 3

Sé que esto es antiguo, pero no creo que la respuesta previamente aceptada sea correcta. Creo que esto está sucediendo como resultado de que los valores de píxel se truncan de float a byte. En Windows 7 con la versión de Chrome 39.0.2171.95m, después de ejecutar su violín por un tiempo, la imagen sigue siendo visible, pero solo ligeramente, y no parece estar cambiando más. Si tomo una captura de pantalla, veo los siguientes valores de píxeles en la imagen:

(246, 246, 246)

Cuando dibuja un rectángulo sobre él con rgba de:

(255, 255, 255, 0.1)

y aplica la mezcla alfa usando el modo de composición predeterminado de source-over, antes de convertir a un byte que obtienes:

(255 * 0.1 + 246 * 0.9) = 246.9

De modo que puede ver que, suponiendo que el navegador simplemente trunca el valor del punto flotante en un byte, escribirá un valor de 246, y cada vez que repita la operación de dibujo siempre terminará con el mismo valor.

Hay una gran discusión sobre el tema en este blog publicado aquí .

Como solución alternativa, puede borrar el lienzo de forma continua y volver a dibujar la imagen con un valor GlobalAlpha cada vez menor. Por ejemplo:

    // Clear the canvas
    ctx.globalAlpha = 1.0;
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fillRect(0,0,canvas.width(),canvas.height());

    // Decrement the alpha and draw the image
    alpha -= 0.1;
    if (alpha < 0) alpha = 0;
    ctx.globalAlpha = alpha;
    console.log(alpha);
    ctx.drawImage(image, 0, 0, 256, 256);
    setTimeout(draw, 100);

Fiddle está aquí .