我有一个复杂的循环来计算我想在 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 中调用绘图。
有没有人知道为什么;
最佳答案
您必须使用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
时阻止整个浏览器执行任何操作。
关于javascript - 将连续帧绘制到 HTML5 Canvas 仅显示最后一帧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4638848/