Emscripten - 具有纯 html5 画布支持的 C++（不是 WebGL）答案

【问题标题】：Emscripten - C++ with pure html5 canvas support (not WebGL)Emscripten - 具有纯 html5 画布支持的 C++（不是 WebGL）
【发布时间】：2013-06-12 11:31:20
【问题描述】：

在使用 emscripten 时，有什么方法可以在 C++ 下访问画布 2D 上下文吗？
我希望能够使用画布的 api 函数（如 lineTo、fillRect1d done 等）绘制简单的形状/路径（所以基本上使用列出的任何函数 here。

我会指出我宁愿不依赖 SDL，但如果它是唯一可靠的方法，那么有没有办法强制它编译为 JavaScript，这样结果就不会使用 WebGL，而是使用基本的 canvas api ?

或者我是否应该按照以下建议对 api 函数进行简单映射：Calling JavaScript From C/C++？

在有人分享更好的解决方案之前，我很可能会在完成映射后立即在此处分享。

【问题讨论】：

用 Javascript 设置画布并进行映射。应该很容易做到。
您找到解决方案了吗？还是你做了映射？
希望我能帮忙，但这是很久以前的事了，我几乎记不得了。我想我决定做映射。不幸的是，我正在做的项目被取消了，所以我永远无法完成并分享它。

标签： javascript c++ canvas emscripten

【解决方案1】：

根据Emscripten documentation，您可以在生成 Javascript 时使用 SDL 和 C++ 来获取画布。 SDL 转换在本机画布调用中实现。

【讨论】：

【解决方案2】：

据我了解，使用 SDL_SWSURFACE 初始化的 SDL 将创建“2d”上下文，而不是“webgl”/“experimental-webgl”上下文。功能可以在 sdl_rotozoom 测试或 GitHub 上看到：https://github.com/kripken/emscripten/blob/master/tests/sdl_rotozoom.c

【讨论】：

【解决方案3】：

我通过embind / emscripten::val使用了动态绑定

示例（emscripten v3.0.0）：

#include <emscripten/val.h>

auto main() -> int {
  const auto document = emscripten::val::global("document");
  const auto canvas =
      document.call<emscripten::val, std::string>("querySelector", "canvas");

  auto ctx = canvas.call<emscripten::val, std::string>("getContext", "2d");

  const auto width = canvas["width"].as<int>();
  const auto height = canvas["height"].as<int>();

  ctx.call<void>("clearRect", 0, 0, width, height);

  // rect
  ctx.set("fillStyle", "white");
  ctx.call<void>("fillRect", 0, 0, width, height);

  // line
  ctx.set("strokeStyle", "black");
  ctx.call<void>("moveTo", 0, 0);
  ctx.call<void>("lineTo", width, height);
  ctx.call<void>("stroke");

  // text
  ctx.set("fillStyle", "black");
  ctx.set("font", "bold 48px serif");
  ctx.call<void, std::string>("fillText", "Hello World!", width / 2,
                              height / 2);

  return 0;
}

emcc src/main.cpp -g -s ENVIRONMENT='web' -std=c++20 --bind -o build/main.js

附言

顺便说一句，如果 emscripten 中不存在静态/预定义绑定，或者您只是不想使用存在的绑定，则可以使用相同的方法处理任何 Web API。例如。我想尽可能地坚持使用CanvasRenderingContext2D Web API，所以 SDL 不是我的选择。

【讨论】：