キャンバスを使用した画像スライドショーHTML5

Question

HTML5キャンバスと少しのJavaScriptを使用して画像スライドショーを作成しようとしています。私の問題は次のとおりです。スライドショーは、イメージセットを最初に通過するために必要なフェード効果で動作します。その後、イメージは効果なしでキャンバスに描画され、そのようになります。

HTML：

<canvas id="showCanvas" width='600' height='400'>Canvas Not Supported</canvas> 

JAVASCRIPT：

<script type="text/javascript"> 

     var imagePaths = ["images/j0149014.jpg","images/j0149024.jpg","images/j0149029.jpg"]; 
     var showCanvas = null; 
     var showCanvasCtx = null; 
     var img = document.createElement("img"); 
     var currentImage = 0; 
     var revealTimer; 

     window.onload = function(){ 
      showCanvas = document.getElementById('showCanvas'); 
      showCanvasCtx = showCanvas.getContext('2d'); 
      img.setAttribute('width','600'); 
      img.setAttribute('height','400'); 
      setInterval(switchImage,3000); 
     } 

     function switchImage() { 

      img.setAttribute('src',imagePaths[currentImage++]); 
      img.onload = function(){ 
       if(currentImage >= imagePaths.length) 
        currentImage = 0; 
       showCanvasCtx.globalAlpha = 0.0; 
       revealTimer = setInterval(revealImage,100); 
      } 
     } 

     function revealImage() { 
      showCanvasCtx.drawImage(img,0,0,600,400); 
      showCanvasCtx.globalAlpha += 0.1; 
      if(showCanvasCtx.globalAlpha >= 1.0) 
       clearInterval(revealTimer); 
     } 

</script> 

Answer 1

は、フェージングは​​、あなたが期待通りに動作していないいくつかの理由があります。

は

ctx.globalAlphaは数、またはJavaScript番号を表す文字列でもない数学の操作にctx.globalAlphaを使用しないでください。これはCSSアルファ値であり、計算を行うために参照されるべきではありません。

なぜですか？

if(ctx.globalAlpha >= 1){ //is the problem as it never happens 

globalAlpha CSSのアルファ値です。無効なCSS値がその無効なアルファ値であるようにctx.globalAlphaが1より大きくなることはありません

許可されていないCSSアルファ値が浮動小数点値ではなく、それはのために誤った結果をもたらす操作のビットの結果であります数学的操作

アルファは0.999999（その付近）まで上昇し、0.1を追加すると無効なアルファが発生します。無効なアルファは許可されていないため、globalAlphaの値は変更されません。それは0.99999にとどまり、間隔は決してキャンセルされません。

したがって、imgを新しいsrcに変更するたびに、それはまだ実行中のすべてのインターバルタイマーによって描画されます。

ストアJavascriptの変数にアルファとは、それが> = 1のとき、アルファ、テストを設定するのではなくctx.globalAlpha

キャンバスのレンダリングにCSSのアルファ文字列を使用するためにそれを使用

描画累積的ですキャンバス上の白がアルファ0.5の場合は灰色のピクセルが表示され、キャンバスをクリアせずに再び描画され、新しいピクセルが灰色と白の0.5になります。 2番目のレンダリングでは、グレーではなく白が表示されます。 0.5 + 0.5 = 1;

同じ画像を自分の上に描画しています。最初にアルファ0.1の全ピクセル（10％）、次いで0.2％のアルファ0.2で20％を加算した結果、30％、0.3％および0.4％の画像ピクセルが得られました。従って、アルファが0.4である場合、画像は既に完全にレンダリングされている。

イメージを2部保存する必要があります。前の画像と新しい画像。アルファ= 1で前の画像を描画し、必要なアルファで次の画像を描画します（以前の画像がキャンバスをクリアしていない場合）

これは問題を解決するはずです。