在画布上的精确位置创建输入文本字段？

【问题标题】：Creating Input TextField at precise position on Canvas?在画布上的精确位置创建输入文本字段？
【发布时间】：2012-03-19 21:34:14
【问题描述】：

Canvas 可以绘制文本，但不能创建输入文本字段。这意味着必须在 html 中执行此操作，但是您如何确保将该文本字段准确定位在您想要的位置？

我希望能够在运行时以编程方式执行此操作。

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

创建以下 HTML 结构以将输入框放置在画布上。

<div id="container" style="width:500px; height:500px; position:relative;">
    <canvas id="drawing-surface" width="500px" height="500px"></canvas>
    <input type="text" style="position:absolute; left=?; top=?;" />
</div>

希望这能解决您的问题。将left=? 和top=? 替换为适当的位置。

【讨论】：

谢谢，如果我需要以编程方式移动输入怎么办？
假设您使用的是 jquery 库，请执行此操作。 $('#input').css({ top: topPos, left: leftPos});