如何强制浏览器重新绘制图像?

How can one force the browser to redraw an image?

本文关键字：绘制 图像 何强制 浏览器 新绘制      更新时间：2023-09-26

我正在制作一款涉及投掷雪球的JavaScript游戏。我需要雪球在飞行过程中尽可能频繁地渲染。Chrome完成了所有的计算，包括设置样式。左边和样式。顶部属性，但实际上不会重新绘制雪球，直到它到达目的地。Opera没有这个问题。

相关的一点是，在renderSnowball()之后放入alert()可以解决问题，除非使用alert()是一个明显的问题。

下面是目前为止的代码: 
function throwSnowball()
{
    var theta = parseFloat(angleField.value) *    Math.PI/180 ;
    var Vir = parseFloat(velocityField.value) ;
    if (!isNaN(Vir) && !isNaN(theta) )
    {
    Vix = Math.cos(theta) * Vir * 50;
    Viy = Math.sin(theta) * Vir * 50;   
time = new Date() ;
var timeThrown = time.getTime() ;
    while (snowballPosY > 0)
    {
        current = new Date() ;
        var currentTime = current.getTime() ;
        var timeElapsed = (currentTime - timeThrown)/5000 ;
        snowballPosX += Vix * timeElapsed;
        snowballPosY += Viy * timeElapsed;
        Viy -= GRAVITY * timeElapsed ;
        renderSnowball() ;      //renderSnowball() sets the style.left
                 // and style.top properties to snowballPosX pixels 
                 // and snowballPosY pixels respectively                        
        timeThrown = currentTime ;
    }
    snowballPosX = 0 ;
    snowballPosY = 50 ;
    renderSnowball() ;
    }
}

你完全阻塞了主线程。你有没有尝试过使用setTimeout(即使是零超时)来允许其他事情发生在你的动画?

如果你愿意使用实验技术，requestAnimationFrame会更好。

编辑:setTimeout方法看起来像这样(取代while循环): 
var drawAndWait = function() {
  if (snowballPosY > 0) {
    // movement/drawing code here
    setTimeout(drawAndWait, 20 /* milliseconds */);
  } else {
    // reset code that would normally go after your while loop
  }
};
drawAndWait();

所以每次绘图完成时，如果合适的话，它会安排自己再次被调用。注意，您的throwSnowball函数将很快返回;投掷直到稍后才真正完成。这需要一段时间来习惯正确的操作;如果一开始不直观，也不要太在意。

试着跳出这个紧循环。Chrome可能不希望重新绘制，直到你的函数退出。尝试使用setInterval或setTimeout给Chrome一个机会重新绘制。

相关文章：