使用drawImage将加载的图像淡入Canvas

Question

使用drawImage将加载的图像淡入Canvas

Bob*_*aar 1 html javascript jquery canvas drawimage

这个关于交叉淡入淡出图像的问题已经给出了 Canvas 中交叉淡入淡出解决方案的答案。我正在尝试做同样的事情，唯一的区别是我正在尝试淡化运行时加载的图像。

图像加载正确，但没有可见褪色。这是因为加载图像而不起作用吗？谢谢。

超文本标记语言

 <div id="wrapper">
     <canvas id="bg1"></canvas>
     <canvas id="bg2"></canvas>
 </div>

Run Code Online (Sandbox Code Playgroud)

JS

var toggle = true;

var canvas         = document.getElementById('bg1');
    canvas.width   = $(document).width();
    canvas.height  = $(document).height();
var ctx            = canvas.getContext('2d');

var canvas2        = document.getElementById('bg2');
    canvas2.width  = $(document).width();
    canvas2.height = $(document).height();

var ctx2           = canvas2.getContext('2d');

var image = new Image();
image.src = 'download1.jpg';

var image2 = new Image();
image2.src = 'download2.jpg';

image.onload = function() {
    ctx.drawImage(image, 0, 0, 200, 100);
    ctx2.drawImage(image2, 0, 0, 200, 100);
};

$('#wrapper').click(function () {
    if (toggle)
    {
        $('#bg2').fadeIn();
        $('#bg1').fadeOut();
    }
    else
    {
        $('#bg1').fadeIn();
        $('#bg2').fadeOut();
    }

    toggle = !toggle;
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

mar*_*rkE 5

是的，您需要给图像时间来加载。

而且，jQuery 无法在画布元素上执行淡入/淡出，因此您必须手动执行此操作。

演示： http: //jsfiddle.net/m1erickson/zw9S4/

代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

$("#fade").hide();

var imageURLs=[];  // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg");
loadAllImages();
//
function loadAllImages(){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                $("#fade").show();
                ctx.drawImage(imgs[0],0,0);
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}


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

    var fadeOutIndex=imgs.length-1;
    var fadeInIndex=0;
    var fadePct=0;

    function animateFade(){
        if(fadePct>100){return;}
        requestAnimationFrame(animateFade);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        draw(imgs[fadeInIndex],fadePct/100);
        draw(imgs[fadeOutIndex],(1-fadePct/100));
        fadePct++;
    }

    function draw(img,opacity){
        ctx.save();
        ctx.globalAlpha=opacity;
        ctx.drawImage(img,0,0);
        ctx.restore();
    }

    $("#fade").click(function(){
        fadePct=0;
        if(++fadeOutIndex == imgs.length){fadeOutIndex=0;}
        if(++fadeInIndex == imgs.length){fadeInIndex=0;}
        animateFade();
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="fade">Fade to next Image</button><br>
    <canvas id="canvas" width=204 height=204></canvas><br>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年前
查看次数：	11675 次
最近记录：	12 年前