Question

我希望用户在canvas元素之外输入文本，并使其实时显示或在按下按钮时显示在画布上。

我是画布和JavaScript的新手。

谢谢。

Answer 1

这是简单的模式。您可以在此处了解有关画布中文本的更多信息：https://www.w3schools.com/graphics/canvas_text.asp

/* Very basic canvas setup */
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");

      /* Function what is called on every input change */
      var UserInput = document.getElementById("UserInput");
      UserInput.oninput = function() {
        // Sending to console text which is now in input
        //console.log(UserInput.value);

        /* Drawing text taken from input on 100, 100 */
        ctx.font = "30px Arial";
        ctx.fillText(UserInput.value, 100, 100);

      };

<html>
  <head>
  </head>

  <body>


    <canvas id="myCanvas" width="500" height="250" style="border:1px solid #000000;">
    </canvas>

    <input type = "text" id = "UserInput">

 

  </body>
</html>

输入期间使文字实时显示在画布上

1 个答案: