使用 HTML canvas 制作图片幻灯片效果时动画不是很流畅

Question

我想使用 HTML5 画布制作图像幻灯片效果。我可以通过翻译画布和重绘图像来“滑动”图像。但是，在滑动过程中，画布被清除并重新绘制图像的左侧会导致图像在左侧出现一些闪烁。 这是一个演示链接：http://codepen.io/make2514/pen/rLQwbz。下面是我的画布脚本：

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

我尝试将 x 轴画布平移减小到更小的值，但闪烁仍然存在。

如果有任何建议，我将不胜感激！

Answer 1

您的代码中有很多小错误。您在图像的onload 事件之前定义了图像的src 属性，这不会确保它被触发。您的 push 函数将永远运行，但应该会在图像离开屏幕后立即结束，大概。您也没有使用从play 传递给push 的回调。我将回调添加为参数并在push 最后一次执行时执行。您还有 canvas 和 canvasIn 参数，这并不是真正必要的。您甚至没有使用canvasIn，而是使用了img。因此，我删除了这些论点。我还添加了一个xOff 变量来跟踪画布的状态以了解动画何时完成。

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