globalAlpha на одном изображении в холсте

Я хотел бы сделать небольшую анимацию с html5-canvas. У меня есть фон, кружка на фоне, монеты в этой кружке, которая прозрачно. Я хочу эффект затухания, когда появляется кружка. У меня проблема, потому что когда я даю globalAlpha для кружки, остальные получают те же результаты. Мне нужна анимация, где я могу дать эффект затухания для каждого элемента. Теперь у меня есть это:globalAlpha на одном изображении в холсте

<body> 
    <canvas id="myCanvas" width="1600" height="900"></canvas> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var background = new Image(); 
     var money1 = new Image(); 
     var money2 = new Image(); 
     var money3 = new Image(); 
     var money4 = new Image(); 
     var money5 = new Image() 
     var mug = new Image(); 
     var move = 0.01; 

     background.onload = function() { 
      context.drawImage(background, 0, 0); 
     } 

     mug.onload = function(){ 

      context.globalAlpha = 0; 
      var i = 0; 

      var imgFadeInter = setInterval(function(){ 

       context.globalAlpha += 0.01; 
       var a = context.drawImage(mug, 33, 212) 
       console.log(a, 'text'); 
       i++; 
       if(i == 10){ 
        clearInterval(imgFadeInter) 
       } 

      }, 10); 


     }; 
     money1.onload = function() { 
      context.drawImage(money1, 155, 362); 
     }; 

     money2.onload = function() { 
      context.drawImage(money2, 158, 360); 
     }; 

     money3.onload = function() { 
      context.drawImage(money3, 151, 358); 
     }; 
     money4.onload = function() { 
      context.drawImage(money4, 148, 301); 
     }; 

     money5.onload = function() { 
      context.drawImage(money5, 136, 265); 
     }; 
     background.src = 'background-mag.png'; 
     setTimeout(function(){mug.src = 'mug.png'}, 500); 
     setTimeout(function(){money1.src = 'money1.png'}, 1000); 
     setTimeout(function(){money2.src = 'money2.png'}, 2000); 
     setTimeout(function(){money3.src = 'money3.png'}, 3000); 
     setTimeout(function(){money4.src = 'money4.png'}, 4000); 
     setTimeout(function(){money5.src = 'money5.png'}, 5000); 
    </script>

Извините за мой английский, я надеюсь, что это то, что я написал понятно ..

источник

2014-10-01 Michal

Вы можете добавить пользовательские свойства к объектам изображения, поэтому добавьте альфа вы хотите для каждого изображения :

// start with money1's alpha at a low alpha so you can fade it in 
// alpha will be divided by 100 later (using ints prevents rounding problems) 
money1.alpha=20;

Затем, когда вы drawImage в цикле анимации вы можете установить индивидуальные globalAlpha на основе добавленного свойства:

if(money1.alpha<=100){ 

    // draw money1 at its current alpha 
    context.globalAlpha=money1.alpha/100; 
    context.drawImage(money1, 155, 362); 

    // be sure to tidy up...reset globalAlpha to its default of 1.00 
    context.globalAlpha=1.00; 

    // increase the alpha 
    money1.alpha+=1; 


};

Удачи вам в вашем проекте!

источник

2014-10-01 17:55:33 markE

Я не думал, что смогу сбросить globalAlpha, используя '= 1', спасибо большое! Но теперь я понимаю, почему это не нормально. В цикле 'imgFadeInter' я рисую кружку 10 раз. Могу ли я уничтожить кружку в этом цикле (я должен иметь эффект затухания) и drowImage? Я не могу использовать 'context.clearRect', потому что у меня есть изображение на изображении, когда я его использую, он уничтожает другие, которые находятся под. – Michal

Типичный рабочий процесс холста состоит в том, чтобы перерисовать всю сцену, когда необходимы изменения: очистить холст, перерисовать фоновое изображение, перерисовать альфа-кружку и т. Д. В качестве альтернативы вы можете иметь второй временный холст, расположенный непосредственно поверх основного холста (используйте позицию CSS: абсолют). Затем вы можете «clearRect» по мере необходимости, не беспокоя изображение на своем основном холсте. ;-) – markE

Очень спасибо, это очень полезно для меня! – Michal

globalAlpha на одном изображении в холсте

ответ

Смежные вопросы