画布元素可以嵌套多少个div是否有限制？
[英]Are there limits to how many div's a canvas element can be nested it?
问题描述
I have some webGL(threejs) rendering in canvas inside a div working exactly as I would think with the following structure... 
我在div内的画布中有一些webGL（threejs）渲染，其工作原理与我认为的以下结构完全相同...
<body>
<div id='header'></div>
<div id="webGLDiv">
<script></script>
</div>
<div id='someInfo'></div>
</body>
However, when I nest webGLDiv into a parent div like this.... 但是，当我像这样将webGLDiv嵌套到父div中时...
<body>
<div id="websiteContents">
<div id='header'></div>
<div id="webGLDiv">
<script></script>
</div>
<div id='someInfo'></div>
</div>
</body>
In the browser the script information stays inside webGLDiv, but the canvas element gets pushed just above the closing body tag. 在浏览器中，脚本信息保留在webGLDiv内，但是canvas元素被推到封闭体标签的正上方。
Does anyone no why this is happening? 没有人不知道为什么会这样吗？ In my first example above, the canvas gets placed right after webGLDiv. 在上面的第一个示例中，画布被放置在webGLDiv之后。
1 个解决方案
解决方案1
4 已采纳 2017-04-30 18:26:41
The placement of the <canvas> is controlled by this line in the script: <canvas>的位置由脚本中的以下行控制：
document.body.appendChild(renderer.domElement);
The renderer.domElement is your <canvas> and the document.body is the parent element it's being placed within. renderer.domElement是您的<canvas> ，而document.body是放置在其中的父元素。 (The position of the <script> element isn't used by Three.js for this.) （为此，Three.js不使用<script>元素的位置。）
To change where it's placed, you'll want to specify a different parent element. 要更改其放置位置，您需要指定其他父元素。 To have that be the <div id="webGLDiv"> , you could use: 要<div id="webGLDiv">成为<div id="webGLDiv"> ，可以使用：
document.getElementById('webGLDiv').appendChild(renderer.domElement);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.