Question

跨浏览器不支持背景图像过渡，并且为了解决此问题，当用户将鼠标悬停在section元素上/外时，我尝试使用canvas元素绘制图像。但是它似乎没有用。这些图像根本不会被替换。

这是我到目前为止所拥有的：

HTML

<section class="section2 animate-me" data-src="images/section2_img.png" data-src-hover="images/section2_img_hover.png">
    <canvas id="canvas2" class="background-canvas"></canvas>
        ...
        ...
        //removed for brevity
</section>

JS

$(function () {
    $('.animate-me .animate-container').hover(function () {
            var section = $(this).parent().parent().parent().parent();                
            toggleCanvasImage(section.find('canvas').attr("id"), section.data("src"), section.data("src-hover"));
        }, function () {
            var section = $(this).parent().parent().parent().parent();
            toggleCanvasImage(section.find('canvas').attr("id"), section.data("src-hover"), section.data("src"));
        });
    });

    function toggleCanvasImage(canvasId, imageFrom, imageTo) {

        canvas = document.getElementById(canvasId);
        ctx = canvas.getContext("2d");

        var imageA = new Image();
        imageA.src = imageFrom;
        var imageB = new Image();
        imageB.src = imageTo;

        var i = 0.1; // global alpha      
        var runID;

        function fadeImage() {
            if (i > 1) {
                clearInterval(runID);
                return;
            }
            ctx.globalComposite = "lighter";
            ctx.globalAlpha = i;
            ctx.drawImage(imageA, 0, 0);
            ctx.globalAlpha = 1 - i;
            ctx.drawImage(imageB, 0, 0);
            i += 0.1;
            console.log("draw with alpha: " + i);
        }
        function run() {
            ctx.save();
            runID = setInterval(fadeImage, 100);
            ctx.restore();
        }

        run();
    }

CSS

.background-canvas {
   width: 1920px;
   height: auto;
   position: absolute;
}

代码似乎执行得很好。在发生鼠标悬停时，mouseout事件会传入2个图像url以进行平滑过渡，依次执行运行功能以重绘图像。

该代码通常是从here

中选取的

有什么指针为什么不起作用并修复该问题？

更新这是简化版本的代码。 http://jsfiddle.net/w4aytj95/2/

在画布上使用画布交叉淡入淡出背景图片

0 个答案: