HTML5 Canvas文字未显示
[英]HTML5 Canvas text not appearing
问题描述
我试图通过在文本框中输入消息来在画布上显示文本，但是没有出现。
这是我的代码：
<html>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button onclick="clicked()">Submit</button>
<script type="text/javascript">
function clicked () {
var x = document.getElementById("form_val");
return x.value;
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "25px Verdana";
ctx.fillText(clicked(), 250, 250);
</script>
</body>
</html>
3 个解决方案
解决方案1
4 已采纳 2013-12-05 23:03:01
函数外部的代码将立即触发，将其放入函数中，以便在需要时被调用（按当前状态，它什么都不会调用。当您单击按钮时，它将把输入值返回给onclick方法。尝试以下方法：
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}
解决方案2
1 2013-12-05 23:06:24
HTML：
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button id='submit'>Submit</button>
JavaScript的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
document.getElementById('submit').addEventListener('click', clicked);
function clicked(){
var x=document.getElementById("form_val");
// Create the text when the button is clicked
ctx.fillText(x.value,250,250);
}
小提琴 。
解决方案3
0 2013-12-05 23:04:41
我相信你想做这样的事情
<script type="text/javascript">
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}
这样，单击按钮时将填充文本。 注意：我尚未测试代码，但您可能会看到图片
HTML5 Canvas文字没有出现？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.