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

Question

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

这是代码

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

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

Answer 1

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