FadeIn FadeOut in Html5 canvas

У меня есть холст с изображением, и я хочу постепенно исчезать и постепенно исчезать. Я уже использовал приведенный выше код:FadeIn FadeOut in Html5 canvas

<!DOCTYPE HTML> 
<html> 
<head> 
    <script> 
     var canvas; 
     var context; 
     var ga = 0.0; 
     var timerId = 0; 
     var timerId1 = 0; 

     function init() 
     { 
      canvas = document.getElementById("myCanvas"); 
      context = canvas.getContext("2d"); 

      timerId = setInterval("fadeIn()", 300); 
      console.log(timerId); 

     } 

     function fadeIn() 
     { 
      context.clearRect(0,0, canvas.width,canvas.height); 
      context.globalAlpha = ga; 
      var photo = new Image(); 
      photo .onload = function() 
      { 
       context.drawImage(photo , 0, 0, 450, 500); 
      }; 
      photo .src = "photo .jpg"; 

      ga = ga + 0.1; 

      if (ga > 1.0) 
      { 
       fadeOut(); 
       goingUp = false; 
       clearInterval(timerId); 

      } 
     } 

     function fadeOut() 
     { 
      context.clearRect(0,0, canvas.width,canvas.height); 
      context.globalAlpha = ga; 

      var photo = new Image(); 
      photo .onload = function() 
      { 
       context.drawImage(photo , 0, 0, 450, 500); 
      }; 
      photo .src = "photo .jpg"; 

      ga = ga - 0.1; 

      if (ga < 0) 
      { 

       goingUp = false; 
       clearInterval(timerId); 
      } 
     } 
    </script> 
</head> 
<body onload="init()"> 
    <canvas height="500" width="500" id="myCanvas"></canvas> 
</body>

Можно ли вставить две функции в setIntervals ?? Я хочу запустить fadeOut после функции fadeIn. Как это возможно??

источник

2013-10-08 Jose Ramon

Вы хотите, чтобы изображение мигало? (in, out, in, out.) –

Да, точно !!! исчезают постоянно! –

'фото .src =" фото .jpg "', опечатка в предназначенном? – K3N

Вот один из способов сделать это:

ONLINE DEMO HERE

var alpha = 0, /// current alpha value 
    delta = 0.1; /// delta = speed

В главном цикле затем увеличить альфа с текущим альфа. Когда альфа достигнет увядания 0 или 1 обратного дельта. Это приведет к замиранию пинг-понга:

function loop() { 

    alpha += delta; 
    if (alpha <= 0 || alpha >= 1) delta = -delta; 

    /// clear canvas, set alpha and re-draw image 
    ctx.clearRect(0, 0, demo.width, demo.height); 
    ctx.globalAlpha = alpha; 
    ctx.drawImage(img, 0, 0); 

    requestAnimationFrame(loop); // or use setTimeout(loop, 16) in older browsers 
}

источник

2013-10-08 22:19:26 K3N

Мне нужно определить requestAnimationFrame() ?? –

@FereRes В последних выпусках FireFox и Chrome это не обязательно, но для старых браузеров вы можете использовать [этот полиполк] (http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for -smart-er-animating) или просто заменить его на 'setTimeout (loop, 16)' (не так эффективно, как rAF, но работает в старых браузерах). rAF является частью стандарта HTML5. – K3N

Черт возьми, человек для решения. –

FadeIn FadeOut in Html5 canvas

ответ

Смежные вопросы