rgba fillStyle с альфа-каналом не становится полностью непрозрачным при многократном применении

Я наткнулся на странную проблему. Следующий код приводит к тому, что изображение исчезает, потому что оно снова и снова перекрывается полупрозрачным прямоугольником.

Но, по крайней мере, на 10-й итерации draw (); изображение должно быть полностью перерисовано, потому что к этому моменту прямоугольник должен быть полностью непрозрачным, не так ли? Но на самом деле он никогда не исчезает полностью.

хуже в Chrome, чем в Firefox. Но будьте осторожны: плохие экраны могут скрыть это неправильное поведение =)

Я также сделал демонстрацию на 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);

}    
});

Эффект, который можно достичь, заключается в том, что, скажем, объект движется по всему холсту, а уже нарисованные позиции слегка перерисовываются, поэтому возникает эффект after-glow или after-fade. Но результат этот мимолетный.

Так есть ли решение этой проблемы?

7
задан pimvdb 25 October 2011 в 20:32
поделиться