在HTML5画布中添加元素

Question

HTML5的canvas可以添加元素吗？

例如：

<canvas id="canvas2" width="650" height="850"> 
    <div class="draggable" class="ui-widget-content" width='100px' height='100px'>
       <textarea class="resizable" rows="2" cols="10" style="color: #FF0707; ">
        Example
       </textarea>
    </div>
</canvas> 

那并没有显示任何东西... 但是，如果我将可拖动的div放在html中的任何其他元素中，它就能工作...

我错过了什么吗？

谢谢。

- tiiin4

Answer 1

您不能像那样向画布中添加元素。当浏览器不支持时，会显示画布的innerHTML。您应该在画布旁边添加其他元素，或在画布上方添加

层。

<canvas id="canvas2" width="650" height="850"> 

</canvas>
<div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; z-index: 5;" class="draggable" class="ui-widget-content">
   <textarea class="resizable" rows="2" cols="10" style="color: #FF0707; ">
      Example
   </textarea>
</div>

请参见：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage#回退内容。

- Ming-Tang

Answer 2

Canvas元素是替换元素。它们呈现位图。它们的内容，就像<iframe>和<object>一样，用于在不支持元素时使用。

你正在尝试的是将元素放置在图像中。

Canvas元素的内容（如果有）是该元素的回退内容。

— http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element

- Quentin