Question

我的fillRect比context2d.fillRect慢很多（> 3倍）。我如何优化我的代码或为什么内置fillRect更快（一些app加速？）？

我的意思：

  __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

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

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

我的建议是使用原生fillRect方法，除非你有一个很好的理由（例如做你自己的着色或屏蔽）。你不会接近图书馆功能的速度。

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

Answer 2

为什么要编写本机代码中存在的函数？很明显，你无法在速度方面与之竞争。

如何优化JS画布绘图？

2 个答案: