2

chrome と firefox で 10000 行を描画する以下のコードを試してください。Firefox では非常に遅く (3 ～ 4 秒) 実行されますが、Chrome でははるかに高速に実行されます。フレーム内に数千行のアニメーションを描画するアプリケーションを作成しています。Firefox を高速化する方法を知っている人はいますか? (Firefox のハードウェア アクセラレーションはオンになっています)。

<!DOCTYPE html>
<body>
<html>
<canvas id="myCanvas"></canvas>
</html>
</body>
<script>
  var canvas=document.getElementById("myCanvas");
  var context=canvas.getContext("2d");
  canvas.width=1000;
  canvas.height=600
  context.strokeStyle="black";
  context.lineWidth=0.3;
  context.fillStyle="#8ED6FF";
  context.fillRect(0,0,1000,800);
  var N=10000;
for (var i=0;i<N;i++){
  context.moveTo(500,300);
  context.lineTo(500+200*Math.cos(6.28*i/N),300-200*Math.sin(6.28*i/N));
 }
context.stroke();
</script>
4

1 に答える 1

1

おそらく、各ループ反復の開始時に「beginPath」呼び出しを使用できます。

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

  var canvas=document.getElementById("myCanvas");
  var context=canvas.getContext("2d");
  canvas.width=1000;
  canvas.height=600
  context.strokeStyle="black";
  context.lineWidth=0.3;
  context.fillStyle="#8ED6FF";
  context.fillRect(0,0,1000,800);
  var N=10000;
for (var i=0;i<N;i++){
  context.beginPath();
  context.moveTo(500,300);
  context.lineTo(500+200*Math.cos(6.28*i/N),300-200*Math.sin(6.28*i/N));
  context.stroke();
 }

    });
</script>

</body>
</html>

しかし、主に Firefox のバグを明らかにしたと思います。なぜなら、あなたが言ったように、他のブラウザではまったく問題ないからです。

于 2012-07-29T09:30:29.177 に答える