javascript - 为什么这个 Canvas 代码这么慢？

Question

我有简短的代码，可以在这些轨道上绘制圆(轨道)点(卫星)。卫星绕着轨道运行。事实上代码不是我的，但我被要求解决问题。

根据 chrome 和 firefox 中的分析器，函数 drawSatellite 占用 50%-100% cpu，我想知道为什么。

Canvas 与您的窗口一样大 (1920x1080)。大约有 160 个轨道(随着时间页面在线而增加)。

这是drawSatellite:

OrbitBackground.prototype.drawSatellite = function(ctx, satellite) {
  ctx.fillStyle = satellite.satellite.fill;
  ctx.beginPath();

  if (++satellite.satellite.angularPosition == 360)
    satellite.satellite.angularPosition = 0;

  // 1 FPS = 60 calls => 180 / 6 (6-times faster @ 60 FPS) = 30
  var radians = satellite.satellite.angularPosition * Math.PI / 30 / satellite.rps;

  if (satellite.backward)
    radians = -radians;

  ctx.arc(
      satellite.satellite.x + satellite.orbit.radius * Math.cos(radians),
      satellite.satellite.y + satellite.orbit.radius * Math.sin(radians),
      satellite.satellite.radius,
      0,
      Math.PI*2,
      true
  );
  ctx.closePath();
  ctx.fill();
};

调用它的函数:

OrbitBackground.prototype.drawFrame = function() {
  if (this.running)
    requestAnimationFrame(this.drawFrame.bind(this));

  this.dynamicStageCtx.clearRect(0, 0, this.pageWidth, this.pageHeight);

  for (var i=0; i < this.orbits.length; i++) {
    this.drawSatellite(this.dynamicStageCtx, this.orbits[i]);
  }
};

Answer 1

你这样做:

Loop:
    set fill style
    begin path
    make path
    end path
    fill

这样做会更快:

set fill style (just once, before loop)
begin path (just one path, with loop-number of subpaths)
Loop:
    moveTo (start of subpath)
    make path
    close path
fill (just once, after loop)

但这要求每颗卫星的填充样式都相同。如果只有几种颜色，您可以尝试按颜色将它们组合在一起。

另请注意，计算余弦和正弦很慢(所有三 Angular 函数和平方根调用都很慢)，如果您能避免使用它们，您会过得更好。

Canvas 的大小(像素数)也很重要。考虑将 Canvas 缩小一半或四分之一(960x540 或 480x270)并使用 CSS 将其放大。