淡入淡出

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?