[英]Slow html5 drawing in firefox
Try the code below that draws 10000 lines in chrome and in firefox. 尝试下面的代码在chrome和firefox中绘制10000条线。 In firefox it runs extremely slow (3-4 seconds), in chrome it runs much faster.
在firefox中,它运行非常慢(3-4秒),在chrome中,它运行快得多。 I am writing application that draw in animation thousands of lines in frame.
我正在编写在帧中绘制动画数千行的应用程序。 Does anybody know how to accelerate firefox?
有人知道如何加速Firefox吗? (the hardware acceleration in firefox is swith on).
(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>
You can probably use a "beginPath" call at the beginning of each loop iteration: 您可能可以在每个循环迭代的开始使用“ 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>
But I think that mainly you have revealed a bug in Firefox, because as you said, in other browsers is just OK. 但是我认为主要是您发现了Firefox中的错误,因为正如您所说,在其他浏览器中就可以了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.