브라우저가 강제로 이미지를 다시 그리게 할 수 있습니까?

나는 눈싸움 던지기와 관련된 자바 스크립트 게임을하고 있습니다. 비행 경로에서 가능한 한 자주 눈덩이를 렌더링해야합니다. Chrome은 style.left 및 style.top 속성 설정을 포함하여 모든 계산을 수행하지만 대상에 도달 할 때까지 실제로 눈덩이를 다시 그리지 않습니다. 오페라에는이 문제가 없습니다.브라우저가 강제로 이미지를 다시 그리게 할 수 있습니까?

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() ; 
    } 
}

출처

2012-12-23 Mikhail Foenko

'while'루프가 아니라 'requestAnimationFrame'을 사용하여 이동하십시오. – Ryan

여기에 지금까지 내 코드입니다. setTimeout (심지어 타임 아웃이 없어도)을 사용하여 애니메이션 중에 다른 일이 발생하도록 시도 했습니까?

실험 기술을 기꺼이 사용하려면 requestAnimationFrame이 더 좋을 것입니다.

편집 : 필요한 경우

가

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();

그래서 도면 완료는, 그 자체 주선마다 다시 호출 될 다음 setTimeout 접근 방식은이 같은합니다 (while 루프를 교체)를 보일 것이다. throwSnowball 함수는 빠르게 반환됩니다. 나중에 던질 때까지 실제로 던지지 않습니다. 이것은 제대로하는 데 익숙해지기까지 시간이 걸립니다. 처음에는 직관적이지 않으면 너무 걱정하지 마십시오.

출처

2012-12-23 03:01:23

불행히도, 나는 당신이 의미하는 바를 이해하지 못하기 때문에 자바 스크립트 (나는 한 달 정도)에 대해 매우 익숙하다. 수정본이나 일종의 예를 게시 할 수 있습니까? –

타이트한 루프에서 벗어나보십시오. 기능을 종료 할 때까지 Chrome에서 다시 그리기를 원하지 않을 수 있습니다. Chrome에 다시 칠할 기회를주기 위해 setInterval 또는 setTimeout을 사용해보세요.

출처

2012-12-23 03:01:55 StilesCrisis

브라우저가 강제로 이미지를 다시 그리게 할 수 있습니까?

답변

관련 문제