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

【问题标题】：How to embed an input or textarea in a canvas element?如何在画布元素中嵌入输入或文本区域？
【发布时间】：2014-01-27 12:20:56
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

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

为此，您需要通过键入“伪造”输入并使用上下文的fillText 在画布上绘制文本。

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

单击画布上的任意位置：

回车：

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    font = '14px sans-serif',
    hasInput = false;

canvas.onclick = function(e) {
    if (hasInput) return;
    addInput(e.clientX, e.clientY);
}

//Function to dynamically add an input box: 
function addInput(x, y) {

    var input = document.createElement('input');

    input.type = 'text';
    input.style.position = 'fixed';
    input.style.left = (x - 4) + 'px';
    input.style.top = (y - 4) + 'px';

    input.onkeydown = handleEnter;

    document.body.appendChild(input);

    input.focus();

    hasInput = true;
}

//Key handler for input box:
function handleEnter(e) {
    var keyCode = e.keyCode;
    if (keyCode === 13) {
        drawText(this.value, parseInt(this.style.left, 10), parseInt(this.style.top, 10));
        document.body.removeChild(this);
        hasInput = false;
    }
}

//Draw the text onto canvas:
function drawText(txt, x, y) {
    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.font = font;
    ctx.fillText(txt, x - 4, y - 4);
}

#myCanvas {
    background: lightgrey;
}

&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;

为输入框设置样式，使其更好地融合。您可以改用 textarea 等等。

注意：如果您想稍后编辑文本，您需要在内部跟踪文本/位置。

【讨论】：

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

【解决方案2】：

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

演示：http://jsfiddle.net/DUxAL/

<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>

您可以使用 CSS 为您的 <input> 或 <textarea> 设置任何您想要的样式。

【讨论】：