Animation ist nicht sehr glatt, wenn Sie einen Bildrutscheneffekt mit HTML-Canvas machen

Question

Ich möchte einen Bildrutscheneffekt mit HTML5-Canvas machen. Ich kann das Bild "verschieben", indem ich die Leinwand übersetze und das Bild neu zeichne. Während des Dias wird die Leinwand jedoch gelöscht, und die linke Seite des neu gezeichneten Bildes verursacht etwas Flackern entlang der linken Seite des Bildes. Hier ist ein Demo-Link: http://codepen.io/make2514/pen/rLQwbz. Unten ist mein Skript für die Leinwand:

var img = new Image(); 
var imgLoaded = false; 
img.src = "http://in5d.com/wp-content/uploads/2014/11/SHMNTYMETM.jpg" 
img.onload = function(){ 
    imgLoaded = true; 
}; 

var canvas = document.querySelector('canvas'); 

function play() { 

    push(canvas, img, function() { 
     console.log('done'); 
    }); 
} 

function push (canvas, canvasIn) { 
    var ctx = canvas.getContext('2d'); 

    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    if (imgLoaded) { 
     ctx.translate(5, 0); 
    } 
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 

    window.requestAnimationFrame(function() { 
     push(canvas, img); 
    }); 
} 

Ich versuche, die x-Achse Leinwand Übersetzung kleineren Wert zu reduzieren, aber das Flackern ist immer noch da.

Ich würde wirklich jeden Vorschlag zu schätzen wissen!

Answer 1

Sie hatten viele kleine Fehler in Ihrem Code. Sie haben die Eigenschaft src des Bildes vor dem Ereignis onload definiert, wodurch nicht sichergestellt wird, dass es ausgelöst wird. Ihre push-Funktion würde für immer ausgeführt werden, aber sollte beendet werden, sobald das Bild vermutlich nicht auf dem Bildschirm angezeigt wird. Sie haben auch den Callback, den Sie in push von play übergeben haben, nicht verwendet. Ich habe den Callback als Argument hinzugefügt und ausgeführt, wenn push zum letzten Mal ausgeführt wird. Sie hatten auch ein canvas und canvasIn Argument, die nicht wirklich notwendig waren. Du hast nicht mal canvasIn benutzt, sondern ging stattdessen mit img. Daher habe ich diese Argumente entfernt. Ich fügte auch eine xOff Variable hinzu, um den Zustand des Canvas zu verfolgen, um zu wissen, wann die Animation beendet wurde.

var img = new Image(); 
var imgLoaded = false; 
img.onload = function() { 
    imgLoaded = true; 
}; 
img.src = "http://in5d.com/wp-content/uploads/2014/11/SHMNTYMETM.jpg"; 
var canvas = document.querySelector("canvas"); 
var xOff = 0; 

function play() { 
    push(function() { 
     console.log("done"); 
    }); 
} 

function push (callback) { 
    var ctx = canvas.getContext("2d"); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.translate(5, 0); 
    if (xOff < img.width) { 
     if(imgLoaded) { 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
     } 
     xOff+=5; 
     window.requestAnimationFrame(function() { 
      push(callback); 
     }); 
    } else { 
     callback(); 
    } 
}