Как использовать canvas в emscripten - PullRequest
Новая
       43

Как использовать canvas в emscripten

0 голосов
/ 12 июня 2018

Я работаю над программой веб-сборки.Я могу установить размер холста, используя emscripten_set_canvas_size (хотя я прочитал, что мне нужно переключиться на новый 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;
}

Спасибо, Кирилл

Ответы [ 2 ]

0 голосов
/ 18 июля 2019

Просто примечание, полезный ответ выше не будет отображаться правильно, так как вызов memset () не очищает экран браузера от черного.По-видимому, вы должны явно установить альфа-канал.Так что вместо memset (), 

    int screen[320*320],idx=0;
    for (int x=0; x<320*320; x++)
        screen[idx++] = 0xff000000;
0 голосов
/ 13 июня 2018

Без 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);
}
...