1

Javascript を使用して Windows 8 ゲームのメトロ スタイルを作成しました。gameContext影や透明を設定するとゲームが遅くなる問題があります。

ctx.shadowColor="black";
ctx.shadowBlur = 10; 

ctx.globalCompositeOperation = "lighter";
ctx.globalAlpha = 0.3;

ゲームのパフォーマンスを改善するにはどうすればよいですか?

4

2 に答える 2

4

さて…</p>

シャドウはパフォーマンスの敵 なので使用しないでください: http://www.html5rocks.com/en/tutorials/canvas/performance/

しかし、影を使わなくても影付きの結果を得ることができます!

オブジェクトをキャッシュ画像として保存することで、描画を劇的に高速化できます。以下は、影付きの描画とキャッシュされた画像の描画の比較です。キャッシュされた画像での描画は、影での描画よりも数百倍高速です。

ここに画像の説明を入力

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/7YcaC/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body { margin: 0px; padding: 20px; }
      canvas { border: 1px solid red; margin:10px; }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  </head>
  <body>
    <p id="shadow">Redraw using shadows</p>
    <canvas id="myCanvas1" width="220" height="120"></canvas><br/>
    <p id="cache">Redraw using a cached image</p>
    <canvas id="myCanvas2" width="220" height="120"></canvas>
    <script>
      var canvas1 = document.getElementById('myCanvas1');
      var context1 = canvas1.getContext('2d');
      var canvas2 = document.getElementById('myCanvas2');
      var context2 = canvas2.getContext('2d');

      // create a cache image of the shadowed rectangle
      draw1();
      var image=new Image();
      image.src=canvas1.toDataURL();

      var t1=new Date().getTime();
      console.log(t1);
      for(var i=0;i<100;i++){ draw1(); }
      var t2=new Date().getTime();
      console.log(t2);
      for(var i=0;i<100;i++){ draw2(); }
      var t3=new Date().getTime();    
      console.log(t3);
      alert((t2-t1)+"/"+(t3-t2));
      $("#shadow").text("Redraw using shadows took "+(t2-t1)+" ms");
      $("#cache").text("Redraw using cached image took "+(t3-t2)+" ms");

      function draw1(){
          context1.clearRect(0,0,220,120);
          canvas1.width=220;
          canvas1.height=120;
          context1.rect(10, 10, 200, 100);
          context1.fillStyle = 'red';
          context1.shadowColor = 'black';
          context1.shadowBlur = 10;
          context1.shadowOffsetX = 5;
          context1.shadowOffsetY = 5;
          context1.fill();
      }

      function draw2(){
          context2.clearRect(0,0,220,120);
          context2.drawImage(image,0,0);
      }

    </script>
  </body>
</html>
于 2013-03-29T18:49:54.823 に答える
0

よくわかりませんが、これが役立つ場合があります。これをcssに追加してください

canvas
{
    -webkit-transform3d: translate(0,0,0);
    -moz-transform3d: translate(0,0,0);
    transform3d: translate(0,0,0);
}

これが実際に行うことは、ブラウザが GPU を使用してキャンバスをレンダリングすることを強制することです。したがって、パフォーマンスが向上します。残念ながら、この修正は 3D 変換をサポートするブラウザーのみを対象としています。

于 2013-03-29T16:50:51.020 に答える