m0_50703018 2023-06-19 22:50 采纳率: 0%
浏览 20

canvas设置文本框

最近使用canvas的时候遇到一个问题，需要在canvas画布的上面增加文本输入框用于文本的输入并在完成后保存
找了很多资料，没有找到解决方案，求出手

  • 写回答

2条回答 默认 最新

  • 卑微的Coder 2023-06-19 23:24
    关注

    你可以使用HTML的“
    ”标签。以下是一个简单的例子：

    <html>
  <head>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <input type="text" id="myTextInput" />
  </body>
  <script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 设置文本框位置
    var textBoxPosition = canvas.getBoundingClientRect();
    var textBox = document.getElementById("myTextInput");
    textBox.style.position = "absolute";
    textBox.style.top = textBoxPosition.top + "px";
    textBox.style.left = textBoxPosition.left + "px";

    // 添加事件监听器，以便在用户输入时重绘画布
    textBox.addEventListener("input", function () {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillText(textBox.value, 10, 50);
    });

    // 初始化画布
    context.font = "20px Arial";
    context.fillStyle = "black";
    context.fillText("Canvas", 10, 30);
  </script>
</html>

    在上面的代码中，我们首先定义了一个Canvas和一个文本框，然后使用JavaScript将文本框的位置设置为Canvas的下方。在文本框中输入时，我们使用“input”事件监听器来重新绘制Canvas并显示输入的文本。

    需要注意的是，在绘制文本之前，我们需要设置字体，字体大小和颜色等属性。在此示例中，我们使用了20像素的Arial字体，并将文本颜色设置为黑色。

    评论

报告相同问题？

问题事件

  • 创建了问题 6月19日