问firefox中的html5绘制速度较慢
EN

Stack Overflow用户

提问于 2012-07-29 16:51:33

回答 1查看 688关注 0票数 2

下面的Try the code在chrome和火狐中绘制了10000条线。在火狐中它运行非常慢(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>

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-07-29 17:30:29

您可以在每次循环迭代开始时使用"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中的一个bug，因为正如你所说，在其他浏览器中也是可以的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11707929

复制

相似问题

问firefox中的html5绘制速度较慢
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问firefox中的html5绘制速度较慢EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问firefox中的html5绘制速度较慢
EN