Javascript 如何在html画布中创建动态绘图文本框

我不知道如何实现文本的动态绘图框

以下是示例输出：

注:

如果画布中有其他对象，则框应位于前面

更新

以下是我目前的代码：

MouseDown(){
//if first mousedown
     X1 = tempX; //tempX is for current positon
     Y1 = tempY;
     if (Input.style.display === "none") {
        Input.value = "";
        Input.style.top = tempX + 'px';
        Input.style.left = tempY + 'px';
        Input.size = 1;
        Input.style.display = "block";
        Draw();
        }
}

Draw(){
    var userInput = Input.value;
    rectangledText(X1, Y1, 150, userInput, 12, 'verdana'); //code by markE
}

 function rectangledText(x, y, width, text, fontsize, fontface) { //code by markE
        self.TextWidth = ctx.measureText(Text).width;
        var height = wrapText(x, y, text, fontsize, fontface, width)

        ctx.strokeRect(x, y, width, height);

    }


    function wrapText(x, y, text, fontsize, fontface, maxwidth) {
        var startingY = y;
        var words = text.split(' ');
        var line = '';
        var space = '';
        var lineHeight = fontsize * 1.286;
        ctx.font = fontsize + "px " + fontface;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top'
        for (var n = 0; n < words.length; n++) {
            var testLine = line + space + words[n];
            space = ' ';
            if (ctx.measureText(testLine).width > maxwidth) {
                ctx.fillText(line, x, y);
                line = words[n] + ' ';
                y += lineHeight;
                space = '';
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);
        return (y + lineHeight - startingY);
    }

MouseDown（）{
//如果第一次鼠标落下
X1=tempX；//tempX代表当前位置
Y1=温度；
if（Input.style.display==“无”）{
Input.value=“”；
Input.style.top=tempX+'px'；
Input.style.left=tempY+'px'；
Input.size=1；
Input.style.display=“block”；
Draw（）；
}
}
画（）{
var userInput=Input.value；
矩形文本（X1，Y1，150，userInput，12，'verdana'）；//按标记编码
}
函数矩形文本（x，y，宽度，文本，fontsize，fontface）{//按标记编码
self.TextWidth=ctx.measureText（Text）.width；
var height=wrapText（x，y，text，fontsize，fontface，width）
ctx.冲程（x，y，宽度，高度）；
}
函数wrapText（x、y、文本、fontsize、fontface、maxwidth）{
var startingY=y；
var words=text.split（“”）；
var行=“”；
var空间=“”；
var lineHeight=fontsize*1.286；
ctx.font=fontsize+px+fontface；
ctx.textAlign='左'；
ctx.textBaseline='top'
for（var n=0；nmaxwidth）{
ctx.fillText（行，x，y）；
行=字[n]+''；
y+=线宽；
空格=“”；
}否则{
直线=测试线；
}
}
ctx.fillText（行，x，y）；
返回（y+线宽-起始）；
}

和带解释的示例输出：

---

问题是如何使用输入来包装第一个鼠标向下的矩形和文本。style

Html5画布没有任何本机文本输入功能

在我看来，不要试图让canvas做它不想做的事情

相反，使用CSS将

input type=text

放置在画布的所需部分上。用户可以在此输入中输入他们的文本

用户输入所需文本后，可以在画布上绘制矩形文本，如下所示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var text='Lorem ipsum door sit amet，vel te vocent bonorum singulis。南印度魁马格纳公社。“我们要迫害埃菲西恩图尔。”；
矩形文本（50,50150，文本，12，'verdana'）；
函数矩形文本（x、y、宽度、文本、字体大小、字体面）{
var height=wrapText（x，y，text，fontsize，fontface，width）
ctx.冲程（x，y，宽度，高度）；
}
函数wrapText（x、y、文本、fontsize、fontface、maxwidth）{
var startingY=y；
var words=text.split（“”）；
var行=“”；
var空间=“”；
var lineHeight=fontsize*1.286；
ctx.font=fontsize+px+fontface；
ctx.textAlign='left'；
ctx.textBaseline='top'
用于（变量n=0；n最大宽度）{
ctx.fillText（行，x，y）；
行=字[n]+''；
y+=线宽；
空格=“”；
}否则{
直线=测试线；
}
}
ctx.fillText（行，x，y）；
返回（y+线高开始）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；边距：0自动；}

---

您是想在矩形中显示文本，还是想输入文本？@markE用户应该在动态矩形中输入文本，也可以在矩形中显示文本我同意@markE这不是一个好主意，但有一个问题解决了一个几乎相同的问题：@kaido。是的，这个问题的变体经常被问到。您已经链接到一个答案，该答案根据输入类型=text的输入在画布上很好地绘制了包装文本。在这个问题中，OP似乎还希望在数据输入期间将输入元素定位在画布上。如果我没有感到累（现在是凌晨1:30），我会编辑下面的答案，将输入放置在画布上，然后在用户完成键入后绘制包装文本。干杯，晚安@markE，一个隐藏的输入可能会和链接的答案联系在一起，但我也不会为OP做任何事情：-）向上投票，晚安！你说CSS定位输入类型=文本是什么意思？研究CSS定位——特别是相对和绝对定位：。将画布包装在div元素中，div具有

位置：relative

。将画布设置为

位置：绝对

。创建一个初始隐藏且具有

位置：绝对

的输入类型文本，并将其放入画布下方的包装div中。需要时，使用CSS将输入定位在所需的画布x、y上，并使其可见。下面是一个在画布上定位输入类型=文本的演示：谢谢，当用户键入太长的单词时，我将尝试修复该错误，因为它只在一行中继续。您发现了哪个错误？对于完整的解决方案，您需要将“我的评论”链接中的输入代码与“我的答案”中的显示包装文本代码结合起来。如果您想给用户一个更大的输入区域，那么可以用textarea元素代替in-input元素。