Html5 canvas 使用HTML画布制作图像幻灯片效果时，动画不是很平滑

我想使用HTML5画布制作一个图像幻灯片效果。我能够通过翻译画布和重画图像来“滑动”图像。但是，在滑动过程中，画布被清除，图像的左侧被重新绘制，如果图像被重新绘制，则会导致左侧出现一些闪烁。 这里有一个演示链接：。下面是我的画布脚本：

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轴画布平移减少到较小的值，但闪烁仍然存在

---

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

您的代码中有很多小错误。您在映像的

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

var img=newimage（）；
var imgLoaded=假；
img.onload=函数（）{
imgLoaded=真；
};
img.src=”http://in5d.com/wp-content/uploads/2014/11/SHMNTYMETM.jpg";
var canvas=document.querySelector（“canvas”）；
var xOff=0；
函数播放（）{
推送（功能）{
控制台日志（“完成”）；
});
}
函数推送（回调）{
var ctx=canvas.getContext（“2d”）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.translate（5,0）；
如果（xOff

非常感谢您的意见！你能建议我做一些修改来修复仍然保留在图像左侧的闪烁效果吗？你可以使用动画的时间长度，并从每一帧推断步长，而不是使用5px的固定步长进行平移，或者完全放弃JavaScript和画布，使用CSS3动画。我相信闪烁效果来自每帧跳5倍。例如，如果您尝试1px，效果将不那么明显。