淡入淡出

Question

我試圖在畫布環境中淡入淡出圖像。 Essientially我想要做的是從左到右移動一個圖像，我想淡化它從0％alpha到100％alpha。當我在我的代碼中註釋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?