画像をフェードインする

キャンバス環境で画像をフェードインしようとしています。私がやりたいことは、画像を左から右に動かしながら、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); 
    }

ご意見をお待ちしております。

出典

2012-04-02 user1075004

あなたはjQueryのを使用していない具体的にはどのような理由を示して？ – Cameron

コンテキストを1つの領域に設定し、アルファを変更できますか？ – alex

jQueryは、学習目的のために推測する方法です。できるだけ多くのコーディングスタンスを取得しようとしていますが、jQueryは確かに水平線です。 – user1075004