是否可以爲顯示在畫布上的圖像創建淡入效果？

Question

我有一個圖像（箭頭），顯示當用戶與畫布上的對象進行交互。這個圖像（箭頭）告訴用戶在哪個方向拖動對象。是否可以爲圖像創建淡入效果？

下面的代碼

var curvedArrow = new Image(); 
    curvedArrow.src = "img/curvedArrow.png"; 
// curvedArrow.onload = function() { 
     context.drawImage(curvedArrow, 15, 45, 35, 30); 
// }; 

注：我叫的drawImage（）沒有onload事件，作爲圖像沒有在畫布上顯示出來，如果我內的onload

Answer 1

所謂的drawImage設置src後.onload監聽器，這樣它就會啓動。

var curvedArrow = new Image(); 
    curvedArrow.addEventListener('load', function() { 
     context.drawImage(curvedArrow, 15, 45, 35, 30); 
    }); 
    curvedArrow.src = "img/curvedArrow.png"; 

然後你可以使用的時間間隔和globalAlpha褪色的圖像：

var curvedArrow = new Image(); 
    curvedArrow.addEventListener('load', function() { 
     context.globalAlpha = 0; 
     var imgFadeInter = setInterval(function(){ 
      clearContext(); // a function that clears the canvas 
      context.globalAlpha += 0.01; 
      context.drawImage(curvedArrow, 15, 45, 35, 30); 
      if(context.globalAlpha == 1){ 
       clearInterval(imgFadeInter); 
      } 
     }, 16); // 16ms because jQuery says so   
    }); 
    curvedArrow.src = "img/curvedArrow.png";