HTML5 Canvas 文本未出现

Question

HTML5 Canvas 文本未出现

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

这是我的代码：

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ste*_*her 5

函数外部的代码会立即触发，将其放在函数内部，以便在需要时调用它（就目前而言，它什么都不调用。当您单击按钮时，它会将输入值返回给 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);
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，11 月前
查看次数：	3016 次
最近记录：	11 年，11 月前