Fade ein Bild in

Question

Ich versuche, ein Bild in einer Canvas-Umgebung zu verblassen. Im Wesentlichen möchte ich ein Bild von links nach rechts bewegen, ich möchte es von 0% Alpha zu 100% Alpha verblassen. Wenn ich die globalAlpha- und Alpha-Informationen in meinem Code kommentiere, bewegt es sich so, wie ich es möchte, mein einziges Problem ist es, es zu verblassen. Ich bin in der Lage, die GlobalAlpha-Funktion zu arbeiten, aber es betrifft alle Grafik im Canvas-Bereich. Gibt es einen Weg, wie ich nur das eine Element beeinflussen kann? irgendwann werde ich mehrere Elemente zu verschiedenen Zeiten in der Animation einblenden wollen, basierend auf einem Timer, aber wenn ich das zuerst zum Laufen bringen kann, kann ich von dort aus weitermachen.

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); 
    } 

alle Vorschläge sind willkommen!

Answer 1

Ich denke, diese andere Frage wird Ihnen einen Weg dazu geben.

es zeigt, wie ein Element in der Leinwand Kontext geladen werden dann, wie es verblassen in ..

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