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.