Увядание изображения в

Question

Я пытаюсь увянуть изображение в среде холста. В сущности, я хочу сделать это, перемещая изображение слева направо, я хочу, чтобы он исчезал от 0% альфа до 100% альфы. Когда я комментирую информацию globalAlpha и alpha в своем коде, она движется, как я хочу, моя единственная проблема - заставить ее исчезать. Я могу заставить функцию globalAlpha работать, но она влияет на все изображения в области холста. Есть ли способ повлиять на один элемент? в конце концов, мне захочется погрязнуть в нескольких элементах в разное время в анимации, основанной на таймере, но если я смогу заставить это работать сначала, я могу пойти оттуда.

window.addEventListener('load', eventWindowLoaded, false); 
function eventWindowLoaded() 
{ 
    canvasApp(); 
} 
function canvasSupport() 
{ 
    return Modernizr.canvas; 
} 
function canvasApp() 
    { 
     if (!canvasSupport()) 
     { 
      return; 
     } 



     var pointImage = new Image(); 
     pointImage.src = "images/barry.png"; 
     var barry = new Image(); 
     barry.src = "images/barry.png"; 
     /*var alpha = 0; 
     context.globalAlpha = 1;*/ 

     function drawScreen() 
     { 

      //context.globalAlpha = 1; 
      context.fillStyle = '#EEEEEE'; 
      context.fillRect(0, 0, theCanvas.width, theCanvas.height); 
      //context.globalAlpha = alpha; 

      //Box 
      context.strokeStyle = '#000000'; 
      context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2); 


      if (moves > 0) 
      { 
       moves--; 
       ball.x += xunits; 
       ball.y += yunits; 
      } 



      context.drawImage(barry, ball.x, ball.y); 

      /*context.restore(); 
      alpha += .1; 
      if (alpha > 1) 
      { 
       alpha = 0; 
      }*/ 


     } 

     var speed = 1; 
     var p1 = {x:20,y:250}; 
     var p2 = {x:40,y:250}; 
     var dx = p2.x - p1.x; 
     var dy = p2.y - p1.y; 
     var distance = Math.sqrt(dx*dx + dy*dy); 
     var moves = distance/speed; 
     var xunits = (p2.x - p1.x)/moves; 
     var yunits = (p2.y - p1.y)/moves; 
     var ball = {x:p1.x, y:p1.y}; 
     var points = new Array(); 
     theCanvas = document.getElementById("canvas"); 
     context = theCanvas.getContext("2d"); 
     ctx = theCanvas.getContext("2d"); 
     setInterval(drawScreen, 10); 
    } 

любые предложения приветствуются!

Answer 1

Я думаю, что этот другой вопрос даст вам способ сделать это.

это показывает, как загрузить элемент в контексте холст то, как постепенно исчезать в ..

How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?