Question

我有while循环绘制圆圈：

actx.shadowColor = 'rgba(0, 0, 0, 1)';
while (len--) {
   var point = data[len];

   actx.beginPath();
   actx.arc(point[0] - 15000, point[1] - 15000, 10, 0, Math.PI * 2);
   actx.closePath();
   actx.fill();
}

对我来说似乎有点慢，所以我在想如何优化它。我发现fill()函数的使用时间最长，所以我尝试将它放在循环之后，但它只绘制了最后一个圆。

有没有办法如何一次填满所有圈子？
或者还有其他更快的方法吗？

Answer 1

一些优化：

在循环外部计算Math.PI * 2，而不是每次在循环内计算
在循环之前放置beginPath
在循环内绘制一个arc + closePath（在循环中创建许多圆形子路径）
在循环后填充以立即绘制所有子路径

重构代码：

// test data
var data=[];
for(var i=0;i<100;i++){data.push([i+15000+30,i+15000+30]);}

// calculate PI2 outside the loop instead of every time in the loop
var PI2=Math.PI*2;

actx.shadowColor = 'rgba(0, 0, 0, 1)';

// beginpath once outside the loop
actx.beginPath();
var len=data.length;
while (len--) {
   var point = data[len];

   // draw
   actx.arc(point[0]-15000, point[1]-15000,10,0,PI2);
   // closepath will close the current circle's subpath
   actx.closePath();

}           
// just fill once when done drawing
actx.fill();

画布 - 如何一次填充所有圈子，而不是一个一个

1 个答案: