Javascript 如何在画布元素中嵌入输入或文本区域？

我想通过在HTML画布上显示输入框或文本区域来编辑文本

但是，当我在输入框中键入任何文本时，单击画布后，输入文本将显示出来

---

但我不希望它表现得像那样。我希望嵌入输入框或文本区域，以便可以直接在canvas元素上编辑文本。

canvas是一个简单的位图，不支持嵌入DOM元素（例如输入）

要实现这一点，您需要通过键入“伪造”输入，并使用上下文的

fillText

在画布上绘制文本

例如，当您需要一些输入时，您可以将输入元素放在画布的顶部。完成后，提取输入值并将其绘制到画布上

单击画布上的任意位置：

点击回车键：

var canvas=document.getElementById（'myCanvas'），
ctx=canvas.getContext（'2d'），
字体='14px无衬线'，
hasInput=false；
canvas.onclick=函数（e）{
如果（输入）返回；
附加输入（e.clientX，e.clientY）；
}
//用于动态添加输入框的函数：
函数附加输入（x，y）{
var input=document.createElement（'input'）；
input.type='text'；
input.style.position='固定'；
input.style.left=（x-4）+“px”；
input.style.top=（y-4）+“px”；
input.onkeydown=handleEnter；
document.body.appendChild（输入）；
input.focus（）；
hasInput=true；
}
//输入框的键处理程序：
功能手柄中心（e）{
var-keyCode=e.keyCode；
如果（键代码===13）{
drawText（this.value，parseInt（this.style.left，10），parseInt（this.style.top，10））；
document.body.removeChild（本文件）；
hasInput=false；
}
}
//将文本绘制到画布上：
函数drawText（txt、x、y）{
ctx.textb基线='top'；
ctx.textAlign='左'；
ctx.font=font；
填充文本（txt，x-4，y-4）；
}

#我的画布{
背景：浅灰色；
}

---

不要尝试将画布用于可编辑文本。HTML5画布充满了瞬间干燥的像素。（欲了解更多信息，请阅读我的。）相反，将可编辑文本放置在画布上，按您喜欢的位置放置

演示：

画布{背景：蓝色}
.wrap、.wrap画布{宽度：400px；高度：300px}
.wrap{position:relative}
.wrap>*{position:absolute}
#go{顶部：20px；左侧：40px；宽度：150px；高度：60px}
…
你好，世界

---

你可以使用CSS来设置你的

或

的样式。你对以后如何使文本可编辑有什么想法吗？（即，如果我重新点击一个已经创建的文本框）@Basj，它需要单独处理。将画布视为内部存储的数据的视口。单击文本时，将坐标与内部存储的文本对象进行比较，如果有标准，则显示输入框。之后，将所有内容再次渲染为存储在内部的数据的新视图。对象可以是任何东西，具有自定义属性的自定义对象，数组等。

<style type="text/css">
  canvas { background:blue }
  .wrap, .wrap canvas { width:400px; height:300px }
  .wrap { position:relative }
  .wrap > * { position:absolute }
  #go { top:20px; left:40px; width:150px; height:60px }
</style>
…
<div class="wrap">
  <canvas width="400" height="300"></canvas>
  <textarea id="go">Hello world</textarea>
</div>