강제 캔버스 업데이트

강제로 캔버스를 업데이트하는 방법이 있습니까? 로드 메시지를 표시하고 싶지만 게임이 표시되기 전에로드가 잠겨 있습니다. 나는 부하 함수가 호출되기 전에 "지금 그리기"캔버스 말할 필요 같은 느낌,하지만 어쩌면 다른 방법이 ...강제 캔버스 업데이트

이

가 편집이 :

이 좋아, 단지 명확하게하기 위해 내가 쓴 아주 작은 더러운 스크립트 (내가 내 차 휴식에서 할 수있는 최선 : P)는 내가 무엇을 끝내려고하는지 보여줍니다. 여기 :

<html> 
<head> 
    <title>test page</title> 
</head> 

<body onload="init();"> 
    <canvas id="cnv" width="300" height="300"> 
     canvas not supported.<br/> 
    </canvas> 
</body> 
</html> 

<script type="text/javascript"> 

    var ctx; 

     function init() 
    { 
     var canvas = document.getElementById('cnv'); 
     ctx = canvas.getContext('2d'); 

     ctx.fillStyle = "rgb(255, 0, 0)"; 
     ctx.fillRect(0,0,300,300); 

     FakeLoad(); 

     ctx.fillStyle = "rgb(0, 255, 0)"; 
     ctx.fillRect(0,0,300,300); 
    } 

    function FakeLoad() 
    { 
     var d = new Date(); 
     var start = d.getTime(); 

     while (new Date().getTime() - start < 5000) 
     { 
      //emulate 5 secs of loading time 
     } 
    } 
</script>

지금 생각은 스크립트가 완료되면 자사의 "로드"와 녹색 사각형을 보여주기 위해 빨간색 사각형을 그릴해야합니다. 하지만 HTML 파일에 복사하면 5 초 후에 녹색이 나타나고 빨간색은 나타나지 않을 것입니다. 내 머리 속에는 ctx.Refresh()와 같은 명령이 필요했습니다. 녹색 사각형을 그려서 "지금 업데이트! 기다리지 마!"라고 말한 후 하지만 답장으로 판단하면 문제를 처리 할 수있는 방법이 아닙니다.

어떻게해야합니까? :)

출처

2012-05-15 David Burford

및 코드를? 샘플 코드없이 어떻게 그리는 지 어떻게 알 수 있습니까? – Joseph

예제 스크립트에서 편집했습니다 :) –

[캔버스에서 디스플레이 업데이트를 강제하는 방법] 가능한 복제본 (http://stackoverflow.com/questions/4982631/how-to-force-a-display- 캔버스 업데이트) –

당신이 더 이상 작업이 짧은 시간 종료 후 FakeLoad을 시작하다 전에 캔버스를 표시 할 수 있도록 할 수있는 또 다른 것은 :

var canvas = document.getElementById('cnv'); 
    ctx = canvas.getContext('2d'); 

    ctx.fillStyle = "rgb(255, 0, 0)"; 
    ctx.fillRect(0,0,300,300); 

    setTimeout(function() { 
     FakeLoad(); 

     ctx.fillStyle = "rgb(0, 255, 0)"; 
     ctx.fillRect(0,0,300,300); 
    }, 20); // 20 ms - should be enough to draw something simple

출처

2012-05-15 12:42:04 andrewmu

- 간단하고 효과적입니다. 조금만 지연하면 캔버스에 하나의 정적 로딩 화면에 대해 완벽하게 업데이트 할 수있는 기회가 생깁니다. - 감사합니다 :) –

정확하게 이해하면 WPF에서 다시 렌더링/페인트하거나 HTML DOM을 다시 플로팅 할 수있는 것과 같은 방법으로 캔바스를 업데이트 할 방법이 없습니다.

캔버스가 중간 모드 그래픽을 사용하기 때문입니다. 본질적으로, 캔버스가 지식을 보유하고있는 유일한 것은 캔버스를 구성하는 픽셀입니다. 선 그리기 또는 선 그리기를 호출하면 사각형 또는 선을 구성하는 픽셀이 캔버스에 추가되고 캔바스에 관한 한 그리기 선 또는 그리기 원 호출에 대한 모든 사항을 잊어 버리고 캔버스를 새로 고칠 수 없습니다 동일한 결과를 얻습니다.

렌더링 된 그래픽에 대한 지식을 '보유'하고 있다면 SVG를 사용해 볼 수 있습니다.이 그래픽은 유지 모드 그래픽을 사용합니다. 본질적으로 그것은 영역이 더러워 질 때마다 다시 렌더링되는 자체 DOM (객체의 고개 (원, rect 등))입니다. 한마디로

이 페이지는 즉시 모드 그래픽과 유지 모드 그래픽의 차이를 이해 돕는 매우 좋다 : http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

나는 당신의 질문을 오해하고있어 경우, 내 사과를 받아 주시기 바랍니다 말했다 모든!

업데이트 문제의 추가 정보에서

주요 자바 스크립트 스레드가 항상 오초 루프 중입니다 때문에 당신이 녹색 사각형이 못 볼 이유. UI를 업데이트 할 시간이 없습니다. 로딩 화면으로 캔버스가 업데이트되는 시간을 허용하려면 모든로드를 비동기 적으로 수행해야합니다.

어떤 종류의 로딩을 하시겠습니까? 이미지 등의 경우 $.ajax 및 jQuery을 사용하여 잡을 수 있습니다. 이렇게하면 비동기 적으로 이미지가 위치에서 가져오고 마지막 이미지가 검색되면 캔버스를 내용에 따라 지우고 다시 칠할 수 있습니다. 분명히이 좀 psudo 코드입니다

<script type="text/javascript"> 

    var ctx; 

    function init() 
    { 
     var canvas = document.getElementById('cnv'); 
     ctx = canvas.getContext('2d'); 

     ctx.fillStyle = "rgb(255, 0, 0)"; 
     ctx.fillRect(0,0,300,300); 

     FakeLoad(); 
    } 

    function FakeLoad() 
    { 
     $.ajax({ 
      url: "www.foo.com/bar.jpg", 
      success: function(data) 
      { 
       // Do something with the data (persist it) 
       RenderApp(); 
      } 
     }); 
    } 

    function RenderApp() 
    { 
     // Rendering the rest of the application/game 
     ctx.fillStyle = "rgb(0, 255, 0)"; 
     ctx.fillRect(0,0,300,300); 
    } 

</script>

을, 그러나 희망 그것은 당신에게 몇 가지 아이디어를 줄 것이다 :

나는 이런 식으로 뭔가를 생각!

설명이 필요하면 알려주세요.

출처

2012-05-15 10:14:14 Andy

는 내가 쫓았 던 것이 아니었지만 여전히 매우 흥미 롭습니다. 정보에 감사드립니다! –

화려한 대답과 나는 그것에서 많이 배웠다! 이 경우에는 아래의 setTimeout() 메소드를 사용하기 때문에 (로딩 메신저 (프로 시저 데이터를 많이 생성하고, 스프라이트, intialising 데이터베이스 등을로드하는 중) 가장 간단했기 때문에 아래에갔습니다.하지만이 또한 투표했습니다. 나는 그것이 매우 유용하고 유용하다고 생각한다. 나는 당신의 시간을 appreiciate :) –

걱정하지 마! 의견을 보내 주셔서 감사합니다! :) 대답으로 받아 들여진 – Andy

강제 캔버스 업데이트

답변

관련 문제