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

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

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

1 个答案: