Я наткнулся на странную проблему. Следующий код приводит к тому, что изображение исчезает, потому что оно снова и снова перекрывается полупрозрачным прямоугольником.
Но, по крайней мере, на 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. Но результат этот мимолетный.
Так есть ли решение этой проблемы?