Ich versuche, einen Text auf einer Leinwand anzuzeigen, indem ich eine Nachricht in ein Textfeld eingebe, aber sie wird nicht angezeigt.

Hier ist mein Code:

<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>
0
stud91 6 Dez. 2013 im 02:57

3 Antworten

Beste Antwort

Der Code außerhalb Ihrer Funktion wird sofort ausgelöst. Fügen Sie ihn so in die Funktion ein, dass er aufgerufen wird, wenn er benötigt wird (derzeit ruft er nichts auf. Wenn Sie auf die Schaltfläche klicken, wird der Eingabewert an die onclick-Methode zurückgegeben. Versuchen Sie stattdessen Folgendes:

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);
}
5
Sterling Archer 5 Dez. 2013 im 23:03

Ich glaube, Sie wollen so etwas tun

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

Damit wird der Text beim Klicken auf die Schaltfläche gefüllt. Hinweis: Ich habe den Code nicht getestet, aber Sie erhalten möglicherweise das Bild

0
pollirrata 5 Dez. 2013 im 23:04

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

Geige.

1
net.uk.sweet 5 Dez. 2013 im 23:06