이미지를 교차 페이딩하는 중 오류가 발생했습니다. <canvas>

Question

캔버스 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 인 것으로 보입니다. 내가 가진 유일한 문제는 getContext을 호출하고 img 변수를 설정하기 위해 $() 대신 getElementById을 사용해야한다는 것입니다.

$("#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; 
});