我正在尝试在画布上编辑文本

Question

我想通过在其中显示任何输入框或textarea来编辑画布上的文本。 我已经尝试了，我得到的是当我们在输入框中键入任何文本时，在单击画布后，输入中的文本将显示出来。 但我不想这样。我希望输入bor或textarea嵌入到画布上，以便我们可以在画布上编辑文本。 请我。

Answer 1

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

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

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

这是 online example.

点击画布上的任意位置：

点击输入：

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

输入框的键处理程序：

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

将文字绘制到画布上：

function drawText(txt, x, y) {
    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.font = font;
    ctx.fillText(txt, x - 4, y - 4);
}

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

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

希望这有帮助。

Answer 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>设置样式。