参见英文答案 > 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