如何控制画布在文档中的放置位置？答案

【问题标题】：How to control where the canvas is placed in the document?如何控制画布在文档中的放置位置？
【发布时间】：2020-07-08 21:21:12
【问题描述】：

我有一个带有 UI 的 C++ 应用程序，我使用 emcc 将其转换为 JS。

此应用程序的 UI 采用网页上的画布形式并附加到正文中。如何控制画布的附加位置？

如果我希望将画布附加到 #my-container 而不是正文怎么办？

干杯！

【问题讨论】：

标签： canvas emscripten emcc

【解决方案1】：

从默认输出 html 文件，您将通过带有 -o arg 的构建命令获得此代码（例如）：

 emcc source.c ... -o myapp/index.html

.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
div.emscripten { text-align: center; }      
div.emscripten_border { border: 1px solid black; }
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }

还有兴趣点：

<div class="emscripten_border">
 <canvas class="emscripten"
         id="canvas"
         oncontextmenu="event.preventDefault()"
         tabindex=-1 >
 </canvas>
</div>

我检查了画布容器关系，那里没有任何问题。你可以操纵在任何方向使用画布与容器。

不用担心 emscripten 使用 id="canvas" arg 不错。

在为画布元素指定宽度和高度时要小心。

下一个例子对图形有不同的效果 ->

<canvas style="width:100%"></canvas>

<canvas width="100%"></canvas>

在这方面使用 c,c++ 并不复杂。如果你真的想要那么更好的开始看看参考链接 => https://github.com/mbasso/asm-dom

例子：

一种方式：

 <button onclick="_callFunction()">


// callback for button event
extern "C"
{
    void callFunction() { std::cout << "callFunction called \n"; }
}

// 其他方式

emscripten_run_script("document.getElementById('canvas').width =
 '320'");


// compile 
emcc -s EXPORTED_FUNCTIONS="['_callFunction']"

使用调试器测试下一个链接：

something.html

【讨论】：