javascript - context.fillText 的变量

Question

您好，我正在尝试将变量放入 context.fillText 的文本中。现在屏幕上显示“未定义”。我想在 Canvas 中显示用户输入的文本。我的代码是:

<canvas id="myCanvas" width="578" height="200"></canvas>
<form>
<label for "text">Text:</label>
<input type="text" id="text">
<input type='submit' id="submit" value="submit" onClick="canvas_text()" >
</form>
<script>
var t, word;
   var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');
     t = document.getElementById('text').value;
function canvas_text() {

if(t == '' || t == null) {
 word = "you forgot to put something";
} else {
 word = t;
}
}
  context.font = '40pt Aria';
  context.fillStyle = 'red';
  context.fillText(word, 150, 100);
</script>

Answer 1

移动此行:

context.fillText(word, 150, 100);

进入canvas_text函数。目前，它在定义“text”变量之前运行。

编辑:此行也必须位于函数内部:

t = document.getElementById('text').value;