javascript - 将连续帧绘制到 HTML5 Canvas 仅显示最后一帧

Question

我有一个复杂的循环来计算我想在 Canvas 元素中显示的各种静止帧。每次计算帧时，它都会显示出来，我调用一个计时器并等到我清除它，然后显示下一帧，依此类推。

    drawing(transform(alone, Box, canvasx.width, canvasx.height), false, "00f", canvasx);
    drawing(transform(Lines, Box, canvasx.width, canvasx.height), false, "ff0000", canvasx);

    var date = new Date();
    var curDate = null;

    do {
        curDate = new Date();
    }
    while (curDate - date < 550);

    if (alone.length > 0) {
        canvasx.width = canvasx.width;
    } 

如果我在 var 日期行中放置一个断点并每次按播放，每个单独的帧都会显示，但是当我让它在 Canvas 上运行时， Canvas 在运行时是空的，最后它显示最后一帧。

现在，如果我删除 canvasx.width = canvasx.width;，我仍然会得到相同的行为，显然只是在最后我将所有帧都绘制在另一帧之上。

显然它不是动画，所以我不能在 setinterval 中调用绘图。

有没有人知道为什么;

Answer 1

您必须使用setTimeout 而不是您的循环。

// JavaScript is single thread, and this BLOCKS the re-rendering and display of the canvas
do {
    curDate = new Date();
}
while (curDate - date < 550);

此外，我宁愿使用 context.clearRect(参见 MDC)而不是调整大小，这没有任何性能差异。

按照这些思路应该可以做到这一点:

function drawCanvas() {
    if (alone.length > 0) {
        // clear canvas
    } 
    drawing(transform(alone, Box, canvasx.width, canvasx.height), false, "00f", canvasx);
    drawing(transform(Lines, Box, canvasx.width, canvasx.height), false, "ff0000", canvasx);
    setTimeout(drawCanvas, 550);
}

切勿尝试在 JavaScript 中模拟 sleep，您将在 sleeping 时阻止整个浏览器执行任何操作。