如何在 emscripten 中使用画布答案

【问题标题】：How to use canvas in emscripten如何在 emscripten 中使用画布
【发布时间】：2018-06-12 14:45:29
【问题描述】：

我正在开发一个 webassembly 程序。我可以使用 emscripten_set_canvas_size 设置画布大小（虽然我读到我需要切换到一个新的 API，因为这个 API 会被贬值）...

但我的问题是：如何在所述画布上设置像素？我的程序为画布生成一个 32 位颜色的数组，我需要将这些位从我的内部存储器传输到画布。我该怎么做？

或者，如果我可以获取指向画布数据的内存指针，我可以直接在所述内存中写入...

如果可能的话，我希望这样做而不必求助于任何其他 API（GL、SDL...），我所需要的只是尽快将颜色传输到画布上...仅此而已那个。

理想情况下，我正在寻找一个简短的示例程序：

#include <...>
  uint32_t screen[320*320];
 static void main_loop()
 {
   memset(screen, 0, 320*320*4); // Clear screen
   for (int x=0; x<320; x++)
     for (int y=0; y<320; y++)
       screen[320*(x|y) + (x&y)]= 0xffffff; // set pixel(x or y, x and y) to white... (will draw a serpinsky triangle)
   Copy_ToCanvas(screen);  // THIS IS THE FUNCTION THAT I AM LOOKING FOR
 }

int main()
{
  emscripten_set_canvas_size(320, 320);
  emscripten_set_main_loop(main_loop, 100, true);
  return 0;
}

谢谢，西里尔

【问题讨论】：

标签： canvas emscripten webassembly

【解决方案1】：

没有 SDL，就需要低级代码。

void Copy_ToCanvas(uint32_t* ptr, int w, int h) {
  EM_ASM_({
      let data = Module.HEAPU8.slice($0, $0 + $1 * $2 * 4);
      let context = Module['canvas'].getContext('2d');
      let imageData = context.getImageData(0, 0, $1, $2);
      imageData.data.set(data);
      context.putImageData(imageData, 0, 0);
    }, ptr, w, h);
}

static void main_loop()
{
  memset(screen, 0, 320*320*4); // Clear screen
  for (int x=0; x<320; x++)
    for (int y=0; y<320; y++)
      screen[320*(x|y) + (x&y)]= 0xffffffff; // set pixel(x or y, x and y) to white... (will draw a serpinsky triangle)
  Copy_ToCanvas(screen, 320, 320);
}

【讨论】：

【解决方案2】：

请注意，上面的有用答案不会正确显示，因为 memset() 调用不会将浏览器屏幕清除为黑色。显然，您必须明确设置 alpha 通道。因此，而不是 memset()，

    int screen[320*320],idx=0;
    for (int x=0; x<320*320; x++)
        screen[idx++] = 0xff000000;

【讨论】：