3

画像を含むキャンバスがあり、常に画像をフェードインおよびフェードアウトしたいと考えています。上記のコードを使用しました：

<!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 に 2 つの関数を挿入することは可能ですか?? フェードイン関数の後にフェードアウトをトリガーしたい。それはどのように可能ですか??

4

1 に答える 1