FadeIn FadeOut in Html5 canvas

本文关键字：canvas Html5 in FadeOut FadeIn 更新时间：2023-09-26

我有一个带有图像的画布，我想不断淡入和淡出图像。我使用了上面的代码：

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

是否可以在 setInterval 中插入两个函数？我想在淡入功能后触发淡出。怎么可能？？

这是执行此操作的一种方法：

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

在主循环中，然后用当前阿尔法增加阿尔法。当 alpha 达到枯萎 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
}