HTML5 Canvas 图像渐变转场效果(低资源占用)

我在HTML5 Canvas 图像渐变转场效果中,用图像处理的方式完成了渐变转场效果,但是这种效果目前在浏览器的性能并不高(只有Webkit能流畅运行),更别说再复杂一些的效果了.

如果是需要制作一个可以展现给所有HTML5用户的图像渐变转场效果,那么可以直接使用drawImage和globalAlpha,也可以完成同样的渐变动画.

在线DEMO(位于Google Drive,可能无法访问,示例载入的图片较大,请耐心等待).

以下代码使用drawImage和globalAlpha完成上一篇文章中同样的效果:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Image transition transition effects(fast)</title>
</head>  
<body>  
    <canvas width='850' height='240'></canvas>
    <script>
        var imgList=['nav_event.png',
                     'nav_twitter.png',
                     'nav_banner.png',
                     'nav_drama06.png',
                     'nav_sound.png',
                     'nav_movie.png',
                     'nav_leaflet.png',
                     'nav_trial.png',
                     'nav_count12.png'];

        function loaded(){
            var canvas=document.querySelector('canvas'),
                ctx=canvas.getContext('2d');
            var width=canvas.width,
                height=canvas.height;

            function animation(img1,img2,callback){
                var alpha1=100,
                    alpha2=0;
                (function(){
                    if(!alpha1){
                        return callback();
                    }
                    ctx.clearRect(0,0,width,height);
                    ctx.globalAlpha=alpha1--/100;
                    ctx.drawImage(img1,0,height,width,height,0,0,width,height);
                    ctx.globalAlpha=alpha2++/100;
                    ctx.drawImage(img2,0,height,width,height,0,0,width,height);
                    setTimeout(arguments.callee,1000/30);
                })();
            }

            var i=0;
            (function(){
                animation(imgList[i],imgList[i+=1]||imgList[i=0],arguments.callee);
            })();
        }

        var imgLoaded=0;
        var onload=function(){
            imgLoaded++;
            if(imgLoaded==imgList.length){
                loaded();
            };
        }
        for(var i=imgList.length;i--;){
            var img=new Image();
            img.addEventListener('load',onload)
            img.src=imgList[i];
            imgList[i]=img;
        }
    </script>
</body>  
</html>