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

Question

I don't have an idea on how to implement dynamic drawing box for text.

Basically here is the sample output:

Note:

The box should be infront if there is another object in the canvas.

Update

Here is my code so far:

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

And sample output with explanation :

The issue is how I can make the first mousedown rectangle and text be wrapped using the Input.style

Answer 1

Html5 canvas does not have any native text input capability.

IMO, don't try to make canvas do what it was not intended to do.

Instead, use CSS to position a input-type=text over the desired part of the canvas. The user can enter their text into this input.

When the user has entered their desired text you can draw their text in a rectangle on the canvas like this:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var text='Lorem ipsum dolor sit amet, vel te vocent bonorum singulis. Quem magna commune nam in. Ut eos oportere persecuti efficiantur.'; rectangledText(50,50,150,text,12,'verdana'); function rectangledText(x,y,width,text,fontsize,fontface){ 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); } 

 body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; } 

 <canvas id="canvas" width=300 height=300></canvas>