Question

可以在HTML5的画布中添加元素吗？

例如：

<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中的任何其他元素中它可以工作......

我错过了什么？

THX。

Answer 1

您不能像这样在画布中添加元素。当浏览器不支持innerHTML时，将显示画布的<canvas>。您应该在画布旁边添加额外的元素，或在画布上方添加<div>图层。

<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/en/Canvas_tutorial/Basic_usage#Fallback_content

Answer 2

Canvas元素是替换元素。他们渲染一个位图。它们的内容与<iframe>和<object>的内容一样，仅在不支持该元素时使用。

您要做的就是将元素放入图像中。

canvas元素的内容（如果有）是元素的后备内容。

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

将元素添加到画布html5

2 个答案: