是否可以为显示在画布上的图像创建淡入效果？

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";