Bild-Diashow mit Leinwand HTML5

Question

Ich versuche, eine Bild-Diashow mit HTML5-Leinwand und ein wenig Javascript zu erstellen. Mein Problem ist folgendes: Die Slideshow arbeitet mit dem Fade-Effekt, den ich für die erste Passage durch das Bildset haben möchte, und danach werden die Bilder ohne den Effekt in die Leinwand gezeichnet und so weiter gemacht.

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

Es gibt mehrere Gründe, die Fading funktioniert nicht wie erwartet.

Sie ctx.globalAlpha nicht betriebs Mathematik verwenden

ctx.globalAlpha keine Zahl ist, oder sogar eine Zeichenfolge, die eine Javascript Zahl darstellt. Es ist ein CSS-Alpha-Wert und sollte nicht referenziert werden, um Berechnungen durchzuführen.

Warum?

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

globalAlpha ist ein CSS-Alpha-Wert. Ungültige CSS-Werte sind nicht zulässig. ctx.globalAlpha ist nie größer als 1, da dies ein ungültiger Alpha-Wert ist

Der CSS-Alpha-Wert ist kein Fließkommawert, er ist das Ergebnis einer kleinen Manipulation, die zu falschen Ergebnissen führt mathematische Operationen.

Ihr Alpha geht bis zu 0,999999 (ungefähr), dann fügen Sie 0,1 hinzu, was zu einem ungültigen Alpha führt. Da ungültiges Alpha nicht erlaubt ist, wird der globalAlpha-Wert nicht geändert. Es bleibt bei 0.99999 und das Intervall wird nie abgebrochen.

Jedes Mal, wenn Sie die img in eine neue Quelle ändern, wird sie von allen noch laufenden Intervallzeitgebern gezeichnet.

Shop die alpha in einer Javascript-Variable und verwenden Sie die Alpha-und Test zu setzen, wenn es> = 1 ist, anstatt die CSS alpha Zeichenfolge verwenden in ctx.globalAlpha

Canvas-Rendering ist kumulativ

Zeichnung Weiß auf der Leinwand mit Alpha bei 0,5 ergibt ein graues Pixel, erneut zeichnen, ohne die Leinwand zu löschen, und das neue Pixel ist das Grau plus Weiß 0,5. Der zweite Renderer ergibt ein Weiß, nicht Grau. 0,5 + 0,5 = 1;

Sie zeichnen dasselbe Bild oben auf seinem Selbst. Zuerst mit 0,1 alpha alle Pixel (10%), dann mit Alpha-0,2, die mit 20%, was zu Bildpixeln mit 30%, dann 60% 0,3 und 0,4 zu 100% addieren. Wenn das Alpha also bei 0,4 liegt, ist das Bild bereits vollständig gerendert.

Sie benötigen zwei Kopien der Bilder zu halten. Das vorherige Bild und das neue Bild. Zeichnen Sie das vorherige Bild bei alpha = 1 und die nächste auf dem erforderlichen alpha (wenn kein vorheriges Bild löschen Sie die Leinwand)

, dass die Probleme lösen sollten Sie haben.