javascript - requestAnimationFrame 弄乱了从另一个函数发送到画布上渲染的局部变量

Question

我的应用程序的运行寿命很长。所以我想通过在本地声明变量来动态收集未使用的函数。

function Video1() {
    var video1 = document.getElementById('video1');
    video1.play();
    drawCanvas(video1);
}

function drawCanvas(elem) {
    this.elem = elem;
    console.log(elem);
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this.elem, 0, 0, canvas.width, canvas.height);
    requestAnimationFrame(drawCanvas);
};

var button1 = document.getElementById('button1');
button1.addEventListener('click', Video1, false);

将 requestAnimationFrame 添加为1373086307101.346作为elem值

我使用 setInterval 方法解决了这个问题，但有没有更好的方法可以做到这一点，因为我主要针对移动设备。

Answer 1

你drawCanvas期待一个论点elem。未提供时 - 设置为undefined. 通过打电话requestAnimatinoFrame(drawCanvas)，你会打电话drawCanvas没有任何争论。您可能需要的是包装函数：

function wrapperForDrawCanvas() {
    // Obtain proper elem here

    drawCanvas(elem);
}

然后调用requestAnimationFrame(wrapperForDrawCanvas)而不是requestAnimationFrame(drawCanvas). 这样你drawCanvas总是会得到elem争论。