使用< canvas>交叉淡入淡出图片时出错 [英] Error in crossfading images using <canvas>

问题描述

我想使用canvas drawImage（）方法交叉淡入淡出图像。我使用jQuery来fadeIn（）和fadeOut（）画布。

I'm trying to crossfade images using the canvas drawImage() method. I'm using jQuery to fadeIn() and fadeOut() the canvas.

这里是代码：

$("#c").fadeOut(800,function() {
            //aw and ah are calculated here
        ctx = canvas.getContext('2d');      
        ctx.drawImage(img1, 0, 0, aw, ah);              
        $("#c").fadeIn(400);
});

c是画布的id。问题是 - 如果已经看到img1，fadeOut发生在图像改变之后，即首先图像改变，然后画布渐渐退出并返回。我错过了什么？
感谢

c is the id of the canvas. The problem is - if img1 has been viewed already, the fadeOut happens after the image has changed, i.e. first the image changes, and then the canvas fades out and back in. Am I missing something? Thanks

推荐答案

似乎为我工作。我唯一的问题是，我不得不使用 getElementById 而不是 $（）顺序调用 getContext 并设置 img 变量。

Seems to be working for me. The only issue I had was that I had to use getElementById rather than $() in order call getContext and to set the img variable.

$("#c").fadeOut(800,function() {
    var canvas = document.getElementById("c");
    var aw = 100;
    var ah = 100;
    var img = document.getElementById("img" + (currentImage + 2));
    ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, aw, ah);
    $("#c").fadeIn(400);
    currentImage = currentImage * -1;
});

这篇关于使用< canvas>交叉淡入淡出图片时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！