Проблема с canvas
 

Имеется следующий код:

function FadeOff(canvas, path, mode) {

	var context = canvas.getContext("2d");
	var image = new Image();
	image.src = path;
		
	image.onload = function() {
		
		var al = 1;
		var TimerID = window.setInterval(function() {
			
			if(mode == "STRETCH")
				context.drawImage(image, 0, 0, _size, _size);
				
			if(mode == "ORIGINAL")
				context.drawImage(image, 0, 0);	
				
			al -= 0.05;
			putDebugMsg(round(al));
			context.globalAlpha = al;
			if(al <= 0.1) clearInterval(TimerID);
		
		}, 50);	
		
	}

}

Проблема в том, что эффект не работает. Т.е. таймер тикает, цикл выполняется, но картинка не обновляется. Если верить сообщениям, выводимым через putDebugMsg(), от переменная изменяется, и изменяется правильно. Более того - обратный эффект FadeIn работает абсолютно правильно. Вот его код:

case "FADE-IN":
  al = 0;			
  var TimerID = window.setInterval(function() {
    printImage(canvas, image, mode, round(al));
    al += 0.05;
    if(al >= 1) clearInterval(TimerID);
  }, 50);

Всё просто и логично. Почему же обратный эффект так себя ведёт? Спасибо!

iRomul,

идея всех "прозрачностей" на канве в том, что полупрозрачная картинка при своем рисовании как бы "добавляется", а не "замещает".
т.е., грубо говоря, если ты на абсолютно непрозрачном фоне нарисуешь полупрозрачный квадрат (альфа 0.5), то в канве не появится квадратная "дырка". Просто фон под квадратом будет виден слегка затемненным.

Так и тут - все более прозрачная картинка добавляется к самой себе непрозрачной, и никакого эффекта не видно. вот если бы ты предварительно полностью стирал картинку (оставляя прямоугольную "дырку"), а потом рисовал - да, эффект бы проявился.


а вообще, может обойтись выставлением opacity в стилях канвы?

Яростный Меч,
блин, а ведь и правда! Я об этом даже не подумал. По поводу opacity - получается, что общая прозрачность будет меняться, а канвас у меня черный на белом фоне - будет выглядить странно. Я попробую просто заполнять промежуточные кадры черным прямоугольником. Правда за производительность беспокоюсь - не будет ли излишне тяжёлой такая операция (рисовать картинку + прямоугольник)?

щас откопал одну фичу - http://www.xiper.net/manuals/canvas/...Operation.html
опция может менять поведение полупрозрачных рисований (есть значение "copy", но оно затирает вообще все)

Подложка канвы белого цвета, по-этому и изображение растворяется на белый фон. Может у канвы есть свойство цвета подложки?

в общем, можно так сделать: пример

// рисуем непрозрачную картинку 
ctx.fillStyle = "rgba(0,0,0, 1)";
ctx.fillRect(0, 0, 100, 100);

// выставляем режим замещения
ctx.globalCompositeOperation = "copy";

// делаем область отсечения. Это нужно, если кроме картинки на канве ещё что-то есть,
// и это что-то не должно потеряться из-за "copy"
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,100);
ctx.lineTo(100,100);
ctx.lineTo(100,0);
ctx.closePath();
ctx.clip();

// рисуем полупрозрачную картинку. она сначала затрет старую, потом нарисуется.
ctx.fillStyle = "rgba(0,0,0, 0.5)";
ctx.fillRect(0, 0, 100, 100);

Зачем через линии? Есть же прямоугольник.
Решил проблему несколько иначе - я нарисовал картинку с альфой 1 и циклически рисую поверх неё черный полупрозрачный прямоугольник.
Спасибо за помощь! Наконец-то решил эту проблему.