context.fillText 的变量

Question

您好，我正在尝试将变量放入 context.fillText 的文本中。现在它在屏幕上显示 'undefined'。我想在 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;

context.fillText 的变量

Variable for context.fillText

javascript

canvas

html5-canvas