将连续帧绘制到 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 date line 中放置一个断点并每次按播放键，每个单独的帧都会显示，但是当我让它穿过画布时，它在运行时是空的，最后它显示最后一帧。

现在，如果我删除 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 时，你会阻止整个浏览器做任何事情。