我已经通过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 不是我的选择。