Question

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

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

你的代码中有很多小错误。您在var data = '{"data":{"time":"2016-08-08T15:13:19.605234Z","x":20,"y":30}}{"data":{"time":"2016-08-08T15:13:19.609522Z","x":30,"y":40}}'; var sanitized = '[' + data.replace(/}{/g, '},{') + ']'; var rows = JSON.parse(sanitized); console.log(rows); for(var row in rows){ console.log(row.data.x); console.log(row.data.y); }事件之前定义了图像的src属性，该事件不会确保它被触发。您的onload函数将永远运行，但应该在图像离开屏幕后立即结束。您还没有使用从push传入push的回调。我将回调添加为参数，并在play执行最后一次时执行。您还有一个push和canvas参数，这些参数并不是必需的。您甚至没有使用canvasIn，而是转而使用canvasIn。因此，我删除了这些论点。我还添加了一个img变量来跟踪画布的状态，以了解动画何时结束。

xOff

使用HTML画布

1 个答案: