html 画布 编辑,javascript – 我想在画布上编辑文本

参见英文答案 > HTML5 Canvas Text Edit                                    3个

我想通过在其中显示任何输入框或textarea来编辑画布上的文本.

我已经尝试了,我得到的是当我们在输入框中键入任何文本时,在单击画布后,输入中的文本将显示出来.

但我不想这样.我希望输入bor或textarea嵌入到画布上,以便我们可以在画布上编辑文本.

让我开心.

解决方法:

你不能. 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 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等等.

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

希望这可以帮助.

标签：javascript,html5,canvas

来源： https://codeday.me/bug/20190926/1820124.html