javascript - 操纵输入值

Question

我正在尝试弄清楚如何使用 JavaScript 更改 input 中的值。我想要实现的是，使用 JavaScript 在鼠标单击时绘制圆圈，并获取 input 中的任何文本 trim 第一个字符并将 trim 后的字符放置在圆圈内。我已经设法绘制了圆圈，但似乎无法弄清楚如何将 trim 后的字符放入圆圈内并将其从 input 值中删除。

我的代码是:

  <script>
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    var inputText = document.getElementById("textValue").value;
    //Remove first character from the string
    inputText = inputText.slice(1);
    function createImageOnCanvas(imageId) {
        canvas.style.display = "block";
        document.getElementById("images").style.overflowY = "hidden";
        var img = new Image(500, 500);
        img.src = document.getElementById(imageId).src;
        context.drawImage(img, (0), (0)); 
    }

    function draw(e) {
        var pos = getMousePos(canvas, e);
        posx = pos.x;
        posy = pos.y;
        context.font = "10px Georgia";
        context.fillStyle = "#000";
        context.fillText(inputText, posx, posy); //This does not write the text to the circle
        context.beginPath();
        context.arc(posx, posy, 50, 0, 2 * Math.PI);
        context.fill();
    }

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }

    window.draw = draw;
</script>

标记为:

<div id="images"></div>
<canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="500" height="500" onclick="draw(event)"></canvas>
<input id="textValue" value=""/>

Answer 1

问题是您在页面开头计算inputText 一次，而页面中没有任何内容。然后你就再也不会要求它了。

将 inputText = ... 逻辑移至绘图函数内部。您还需要将剩余的文本分配回输入的值。