3

キャンバスを強制的に更新する方法はありますか？読み込み中のメッセージを表示したいのですが、ゲームが表示される前に読み込みがロックされます。load関数を呼び出す前に、キャンバスに「今すぐ描画」するように指示する必要があるように感じますが、別の方法があるかもしれません...

編集：

わかりました。明確にするために、私は非常に小さな汚いスクリプトを作成しました（お茶の時間にできる最善のこと：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（）;のようなコマンドが必要でした。緑の四角を描いた後、「今すぐ更新してください！待ってはいけません！」と伝えます。しかし、返信から判断すると、これは問題を処理する方法ではありません。

私は何をすべきか？:)

4

2 に答える 2

5

長いタスクを実行する前にキャンバスを表示できるようにするためにできるもう1つのことは、短いタイムアウト後に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-15T12:42:04.500 に答える
3

私があなたを正しく理解している場合、WPFで再レンダリング/ペイントしたり、HTML DOMをリフローしたりできるのと同じ方法で、キャンバスを更新する方法はありません。

これは、キャンバスが中間モードのグラフィックを使用しているためです。基本的に、キャンバスが知識を保持しているのは、キャンバスを構成するピクセルだけです。ドローレクまたはドローラインを呼び出すと、長方形またはラインを構成するピクセルがキャンバスに追加され、キャンバスに関する限り、ドローレクまたはドローサークルの呼び出しをすべて忘れてしまうため、キャンバスを更新できません。同じ結果が得られます。

レンダリングされたグラフィックスの知識を「保持」するものを探している場合は、SVGを試すことができます。これは保持モードのグラフィックスを使用します。基本的に、独自のDOM（オブジェクト（円、長方形など）のheirachy）があり、領域がダーティになるたびに再レンダリングされます。

つまり、このページは、即時モードグラフィックと保持モードグラフィックの違いを理解するのに非常に役立ちます：http： //msdn.microsoft.com/en-us/library/ie/gg193983（ v = vs.85）。 aspx

とはいえ、あなたの質問を誤解している場合は、お詫び申し上げます。

アップデート

質問の追加情報から、

緑の四角が表示されない理由は、メインのJavaScriptスレッドが常に5秒のループでビジー状態になっているためです。UIを更新する時間はありません。キャンバスがロード画面で更新される時間を確保するには、すべてのロードを非同期で行う必要があります。

どのような読み込みをしますか？画像などの場合は、$。ajaxとjQueryを使用してそれらを取得できます。これにより、その場所から画像が非同期的に取得され、最後の画像が取得されたら、コンテンツを使用してキャンバスをクリアして再描画できます。

私はこのようなものを推測します：

<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-15T10:14:14.200 に答える