使用画布 HTML5 的图像幻灯片

Question

我正在尝试使用 HTML5 画布和一些 javascript 创建图像幻灯片。我的问题如下：幻灯片具有我想要的第一次通过图像集的淡入淡出效果，之后，图像被绘制到画布中而没有效果，并继续这样。

HTML：

<canvas id="showCanvas" width='600' height='400'>Canvas Not Supported</canvas>

JAVASCRIPT：

<script type="text/javascript">

        var imagePaths = ["images/j0149014.jpg","images/j0149024.jpg","images/j0149029.jpg"];
        var showCanvas = null;
        var showCanvasCtx = null;
        var img = document.createElement("img");
        var currentImage = 0;
        var revealTimer;

        window.onload = function (){
            showCanvas = document.getElementById('showCanvas');
            showCanvasCtx = showCanvas.getContext('2d');
            img.setAttribute('width','600');
            img.setAttribute('height','400');
            setInterval(switchImage,3000);
        }

        function switchImage() {

            img.setAttribute('src',imagePaths[currentImage++]);
            img.onload = function(){
                if(currentImage >= imagePaths.length)
                    currentImage = 0;
                showCanvasCtx.globalAlpha = 0.0;
                revealTimer = setInterval(revealImage,100);
            }
        }

        function revealImage() {
            showCanvasCtx.drawImage(img,0,0,600,400);
            showCanvasCtx.globalAlpha += 0.1;
            if(showCanvasCtx.globalAlpha >= 1.0)
                clearInterval(revealTimer);
        }

</script>

Answer 1

淡入淡出未按预期工作的原因有多种。

不要将 ctx.globalAlpha 用于数学运算

ctx.globalAlpha 不是数字，甚至不是表示 JavaScript 数字的字符串。它是一个 CSS alpha 值，不应被引用来进行计算。

为什么？

if(ctx.globalAlpha >= 1){ //is the problem as it never happens

globalAlpha 是一个 CSS alpha 值。不允许使用无效的 CSS 值，因此 ctx.globalAlpha 永远不会大于 1，因为这是一个无效的 alpha 值

CSS alpha 值不是浮点值，它是一些操作的结果，导致数学运算的结果不正确。

您的 alpha 上升到 0.999999（大约），然后您添加 0.1，这会导致 alpha 无效。由于不允许使用无效的 alpha，因此 globalAlpha 值不会更改。它保持在 0.99999，并且从不取消间隔。

因此，每次将 img 更改为新的 src 时，所有仍在运行的间隔计时器都会绘制它。

将 alpha 存储在 Javascript 变量中，并使用它来设置 alpha 并在 >= 1 时进行测试，而不是在 ctx.globalAlpha 中使用 CSS alpha 字符串

画布渲染是累积的

在 alpha 为 0.5 的画布上绘制白色会导致灰色像素，在不清除画布的情况下再次绘制，新像素是灰色加白色 0.5。第二个渲染结果是白色，而不是灰色。 0.5 + 0.5 = 1;

您在其自身之上绘制相同的图像。首先使用 alpha 0.1 所有像素 (10%)，然后使用 alpha 0.2 增加 20%，导致图像像素为 30%，然后是 0.3 60% 和 0.4 100%。因此，当 alpha 为 0.4 时，图像已经完全渲染。

您需要保留两份图像。以前的图像和新的图像。在 alpha = 1 处绘制上一张图像，在所需的 alpha 处绘制下一张（如果没有上一张图像清除画布）

这应该可以解决您遇到的问题。