Canvas下在文本框内写字

在 Canvas 中，我们可以通过创建一个文本框（`<input>` 元素）来接受用户输入的文本，然后使用 Canvas 的 `fillText()` 方法将文本绘制到画布上。

以下是一个示例代码：

HTML：

<input type="text" id="textInput">
<canvas id="myCanvas"></canvas>

JavaScript：

// 获取文本框和画布元素
var textInput = document.getElementById("textInput");
var canvas = document.getElementById("myCanvas");

// 获取画布上下文
var ctx = canvas.getContext("2d");

// 监听文本框的输入事件
textInput.addEventListener("input", function() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 获取文本框输入的内容
  var text = this.value;

  // 设置字体样式
  ctx.font = "30px Arial";

  // 在画布上绘制文本
  ctx.fillText(text, 50, 50);
});

以上代码中，我们通过 `addEventListener()` 方法监听文本框的输入事件，当用户输入文本时，清空画布并获取文本框中的值，然后设置字体样式并使用 `fillText()` 方法将文本绘制到画布上。