Javascript HTML5画布文本未显示_Javascript_Html_Canvas

Javascript HTML5画布文本未显示

javascript html canvas

Javascript HTML5画布文本未显示,javascript,html,canvas,Javascript,Html,Canvas,我试图通过在文本框中输入消息在画布上显示文本，但它没有出现这是我的密码： <html> <body> <canvas id="myCanvas" width="600" height="400"></canvas> <input type="text" name="fname" size="50" id="form_val"> <button onclick="clicke

我试图通过在文本框中输入消息在画布上显示文本，但它没有出现

这是我的密码：

<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>


提交
已单击函数（）{
var x=document.getElementById（“form_val”）；
返回x.value；
}
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“25px Verdana”；
ctx.fillText（单击（），250250）；

函数外部的代码会立即触发，将其放在函数内部，以便在需要时调用它（当前情况下，它不调用任何内容）。当您单击按钮时，它会将输入值返回到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);
}

函数外部的代码会立即触发，将其放入函数中，以便在需要时调用它（当前情况下，它不调用任何内容）。当您单击按钮时，它会将输入值返回到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);
}

我相信你想做这样的事

<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);
}


函数单击（）{
var x=document.getElementById（“form_val”）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“25px Verdana”；
ctx.fillText（x.value，250250）；
}

这样，当单击按钮时，文本将被填充。注意：我还没有测试代码，但您可能会看到图片

我相信您希望这样做

<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);
}


函数单击（）{
var x=document.getElementById（“form_val”）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.font=“25px Verdana”；
ctx.fillText（x.value，250250）；
}

这样，单击按钮时将填充文本。注意：我还没有测试代码，但您可能会看到图片

HTML:

<canvas id="myCanvas" width="600" height="400"></canvas>

<input type="text" name="fname" size="50" id="form_val">
<button id='submit'>Submit</button>

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);
}

HTML:

<canvas id="myCanvas" width="600" height="400"></canvas>

<input type="text" name="fname" size="50" id="form_val">
<button id='submit'>Submit</button>

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);
}

是的，这很有效。谢谢。但是由于我需要对画布做一些其他的事情，比如绘制图像，所以我将画布的声明放在单击的（）之外函数。内部只剩下fillText函数。将变量移到函数范围之外，您就会没事了。是的，这很有效。谢谢。但是由于我需要对画布做一些其他事情，例如绘制图像，所以我将画布的声明放在单击（）之外函数。内部只剩下fillText函数。将变量移到函数范围之外，然后就可以了