Emscripten - 支持纯HTML5画布（非WebGL）的C++。

Question

在使用emscripten时，是否有一种方式可以在C++下访问canvas 2D上下文？

我想要能够使用canvas的API函数绘制简单的形状/路径，如lineTo，fillRect等（基本上使用任何在这里列出的函数）。

需要指出的是，我希望不要依赖SDL，但如果它是唯一可靠的方法，那么是否有一种方式可以强制将其编译为JavaScript，以便结果不使用WebGL，而是使用基本的canvas API？

还是应该根据这个建议简单地映射API函数：从C/C++调用JavaScript？

在没有更好的解决方案之前，我很可能会进行映射，并在完成后在此分享。

- Konrad Madej

---

在Javascript中设置你的画布并进行映射。应该很容易做到。 - abergmeier

你找到解决方案了吗？还是你已经完成了映射？ - user3605780

很抱歉，我帮不了你，因为这件事情发生的时间太久远了，我几乎记不清了。我想我当时决定进行映射。不幸的是，我所在的项目被取消了，所以我从未有机会完成并分享它。 - Konrad Madej

Answer 1

根据Emscripten文档，您可以使用C++和SDL来访问生成Javascript时的画布。SDL转换是通过本地画布调用实现的。

- Jonas Schubert Erlandsson

Answer 2

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

- Mike Weir

Answer 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

P.S.

顺便说一下，如果在 emscripten 中不存在静态/预定义的绑定或者您不想使用现有的绑定，同样的方法也可以用于与任何 Web API 一起使用。例如，我想尽可能接近 CanvasRenderingContext2D Web API，所以 SDL 不是我的选择。

- artin