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

Posted 2023-02-22

【中文标题】如何控制画布在文档中的放置位置？

【英文标题】：How to control where the canvas is placed in the document?

【发布时间】：2020-07-08 21:21:12

【问题描述】：

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

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

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

干杯！

【参考方案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 ></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