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并测试＆gt; = 1而不是使用ctx.globalAlpha中的CSS alpha字符串

画布渲染是累积的

在画布上以alpha为0.5绘制白色会产生灰色像素，再次绘制而不清除画布，新像素为灰色加白色0.5。第二个渲染产生白色，而不是灰色。 0.5 + 0.5 = 1;

您正在自己绘制相同的图像。首先使用alpha 0.1所有像素（10％），然后使用α0.2增加20％，得到30％的图像像素，然后是0.3 60％和0.4 100％。因此，当alpha为0.4时，图像已经完全渲染。

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

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

使用canvas HTML5的图片幻灯片

1 个答案: