html5画布内的文本框答案

【问题标题】：Texbox inside canvas of html5html5画布内的文本框
【发布时间】：2012-07-22 08:45:36
【问题描述】：

我可以使用 HTML 5 在画布内插入一个文本框吗？如果是，请告诉我如何在画布内插入文本框？目前我正在使用矩形来实现我的功能，但这不是我期待的方式，所以请帮助我在 HTML 5 中使用 KINETICJS 创建文本框。

【问题讨论】：

标签： javascript html canvas kineticjs

【解决方案1】：

没有。您可以在画布元素前面放置输入或文本区域，使其看起来在内部，但无法将输入嵌入到画布中，因为画布只是通过 JavaScript 绘制像素的空间。

我相当确定您可以在某些浏览器中将输入嵌入到 SVG 中，甚至可以转换它们（旋转、剪切等）。

【讨论】：

我们可以获取任何资源链接来了解画布内的文本框
你可以使用foreignObject在SVG中嵌入HTML，应该应用转换。

【解决方案2】：

真的很简单。

您必须将文本框放在 div 中，然后更改 div 位置。为了做到这一点，在你的身体标签下：

<body>
    <form id="form1" runat="server">
        <div id="mytext"> 
            <asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
        </div> .....

在你的 head 标签下：

<head id="Head1" runat="server">
    <style type="text/css">
        #mytext {
            position: absolute;
            left: 36%;
            top: 725px;
            z-index: 999;
        }
    </style>

通过更改 left 和 top 值，您可以将文本框放置在画布上。

【讨论】：