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

我有一个图像（箭头），当用户与画布上的对象交互时显示。此图像（箭头）告诉用户将对象向哪个方向拖动。是否可以为图像创建淡入效果

这是密码

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

---

注意：我在没有onload的情况下调用drawImage（），因为如果我在onload中调用drawImage，图像不会显示在画布上，请在

.onload

侦听器之后设置

src

，这样它将无论如何触发

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

然后，您可以使用间隔和淡入淡出图像：

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

---

我尝试在onload之后设置.src，但仍然无法加载图像对象。关于clearContext（）函数，我需要清除画布上的所有内容吗？类似于context.reset（）？您需要清除每个帧，或者帧只是重叠。我建议clearRectI更新关于onload问题的答案。在jQuery中，我使用了

$（img）.on（'load'，…

）并忘记了

.onload

不是等效的。curvedArrow加载仍然是不可能的。我得到了“UncaughtTypeError:无法读取undefined的属性'undefined'”