javascript - 如何优化 JS canvas 绘图？

Question

我对 fillRect 的实现比 context2d.fillRect 慢很多(> 3 倍)。我如何优化我的代码或为什么内置 fillRect 更快(一些应用程序加速？)？

我的建议:

  __fillRect : function (data, x, y)//, r, g, b)
  {
    var w = this.__width * 4;
    var idx = x * 4+ y * w;
    var idx_1 = idx + 4;
    var idx_2 = idx + 8;
    var idx_3 = idx + w;
    var idx_4 = idx_3 + 4;
    var idx_5 = idx_3 + 8;
    var idx_6 = idx_3 + w;
    var idx_7 = idx_6 + 4;
    var idx_8 = idx_6 + 8;

    function __setPixelIdx (idx)
    {
      data[idx + 0] = 200;
      data[idx + 1] = 0;
      data[idx + 2] = 0;
      data[idx + 3] = 255;
    }

    __setPixelIdx (idx);
    __setPixelIdx (idx_1);
    __setPixelIdx (idx_2);
    __setPixelIdx (idx_3);
    __setPixelIdx (idx_4);
    __setPixelIdx (idx_5);
    __setPixelIdx (idx_6);
    __setPixelIdx (idx_7);
    __setPixelIdx (idx_8);

  },

Answer 1

由于以下几个原因，您的实现速度较慢:

• 您正在写入一个数组，然后将其复制并转换到 Canvas 帧缓冲区中。
• context2d.fillRect 正在运行 native 代码，而不是解释或 JIT 编译的 JavaScript。
• context2d 可能会使用图形硬件来绘制
• 您一次写入单个字节，而即使是未加速的 native 库也可以写入整个 int32 像素值

我的建议是使用原生的 fillRect 方法，除非你有很好的理由不这样做(例如，自己做阴影或 mask )。您将无法接近库函数的速度。

在主 __fillRect 函数中调用 __setPixelIdx 而不是访问 data 可能没有太大帮助。