FadeIn FadeOut en Html5 canvas

J'ai une toile avec une image et je veux fadein et le fondu de l'image en permanence. J'ai utilisé le code ci-dessus:

<!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>

Est-il possible d'insérer deux fonctions dans setIntervals?? Je veux déclencher fadeOut après fadeIn fonction. Comment est-il possible??

Voulez-vous dire que vous voulez que l'image clignote? ( in, out, in, out . . . )
Oui exactement!!!fade in fade out en permanence!
photo .src = "photo .jpg", faute de frappe dans l'intention?
Non, juste pour l'exemple!

OriginalL'auteur Jose Ramon | 2013-10-08

  1. 7

    Ici est une façon de le faire:

    DÉMO EN LIGNE ICI

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

    Dans la boucle principale, puis l'augmentation de l'alpha avec alpha actuelle. Quand alpha a atteint dépérir 0 ou 1 de la delta. Cela va créer la table de ping-pong fondu:

    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
}
    J'ai à définir requestAnimationFrame()??
    Dans les dernières versions de FireFox et de Chrome, ce n'est pas nécessaire, mais pour les anciens navigateurs, vous pouvez utiliser ce polyfill ou tout simplement le remplacer par setTimeout(loop, 16) (pas aussi efficace que la rAF, mais fonctionne dans les navigateurs plus anciens). rAF est la partie de la norme HTML5.
    Merci man pour la solution.

    OriginalL'auteur