Javascript 使用画布HTML5进行图像幻灯片放映

我正在尝试使用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>

var imagepath=[“images/j0149014.jpg”、“images/j0149024.jpg”、“images/j0149029.jpg”]；
var showCanvas=null；
var showcanvasctxt=null；
var img=document.createElement（“img”）；
var currentImage=0；
var-revealTimer；
window.onload=函数（）{
showCanvas=document.getElementById（'showCanvas'）；
showCanvasCtx=showCanvas.getContext（'2d'）；
setAttribute（'width'，'600'）；
img.setAttribute（'height'，'400'）；
设置间隔（switchImage，3000）；
}
函数switchImage（）{
setAttribute（'src'，imagepath[currentImage++]）；
img.onload=函数（）{
如果（currentImage>=ImagePath.length）
currentImage=0；
showCanvasCtx.globalAlpha=0.0；
revealTimer=设定间隔（Revealtime，100）；
}
}
函数revalimage（）{
showCanvasCtx.drawImage（img，0,0600400）；
showCanvasCtx.globalAlpha+=0.1；
如果（showCanvasCtx.globalAlpha>=1.0）
clearInterval（revealTimer）；
}

淡入效果不如预期有几个原因

不要将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.999999），然后添加0.1，这将导致无效的alpha值。由于不允许使用无效的alpha，因此不会更改globalAlpha值。它保持在0.99999，并且间隔从未取消

因此，每次将

img

更改为新的src时，它都由所有仍在运行的间隔计时器绘制

将alpha存储在Javascript变量中，并使用该变量设置alpha并在其>=1时进行测试，而不是在

ctx.globalAlpha

画布渲染是累积的

在画布上绘制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处绘制下一幅图像（如果没有上一幅图像，请清除画布）

---

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

当开始重新使用已加载的图像时，加载事件可能不再触发。我发现，这种褪色动画的某些内容会及时被覆盖。我已经使用了setInterval调用中的毫秒数，我通过图像集获得了两次传递，效果很好。哇！正如你所建议的，我使用了另一个变量，所有变量都运行得很好。非常感谢你！