Question

我正在尝试使用canvas drawImage（）方法交叉淡化图像。我正在使用jQuery来fadeIn（）和fadeOut（）画布。

以下是代码：

$("#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在图像发生变化后发生，即首先图像发生变化，然后画布淡出并重新进入。我错过了什么吗？感谢

Answer 1

似乎是working for me。我遇到的唯一问题是我必须使用getElementById而不是$()才能调用getContext并设置img变量。

$("#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> </canvas>交叉淡化图像时出错

1 个答案: