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

Question

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

    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 日期行中放置一个断点并每次按播放，则会显示每个单独的帧，但是当我让它运行时，画布在运行时为空，最后显示最后一帧。

现在，如果我删除 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 时执行任何操作。