Question

我正试图找出如何使用input更改JavaScript中的值。我想要实现的是，使用JavaScript在鼠标点击上绘制圆圈并获取input修剪第一个字符时的任何文字，并将修剪后的字符放在圆圈内。我已设法绘制圆圈，但似乎无法弄清楚如何将修剪后的角色放入圆圈并将其从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

您似乎只需要将变量传递回输入值：

XmlDescription3.xml

Answer 2

问题在于，您在页面开头计算inputText 一次，当时没有任何内容。那你再也不会要求了。

将inputText = ...逻辑移到绘图功能中。您还需要将剩余的文本分配回输入值。

操纵输入值

2 个答案: