So erstellen Sie Textfelder in Canvas

Ich wollte ein Textfeld im Canvas erstellen.So erstellen Sie Textfelder in Canvas

HTML

<canvas id="canvas" width="200" height="50"></canvas>

JavaScript

var input = new CanvasInput({ 
canvas: document.getElementById('canvas') 
});

, wenn ich die Datei HTML nichts haben laufen.

Quelle

2016-05-28 Yodfha Thungwiwatthanakul

Sie fügen keine Textbox in die Zeichenfläche ein? Das ist dein vollständiger Code? –

Ich bin wie folgt >> http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input –

Ich poste die Antwort überprüfen Sie es funktioniert gut. –

Sie verfehlten nur einfach die Bibliotheken CanvasInput.min.js einfach aus dem here herunterladen und auf Ihrem Code hinzuzufügen.

Beispielcode:

<html> 
    <title>sample</title> 
    <head> 
    <script src="CanvasInput.min.js"></script> 
    </head> 
    <body> 
    <canvas id="canvas" width="200" height="50"></canvas> 
    <script> 
     var input = new CanvasInput({ 
        canvas: document.getElementById('canvas') 
     }); 
    </script> 
    </body> 
</html>

Quelle

2016-05-28 09:12:31

@YodfhaThungwiwatthanakul Willkommen .. –

Sie können nicht einfach ein Standard-HTML-Eingabefeld in einer Leinwand übertragen, wenn das, was Sie erreichen wollten.

Es sieht so aus, als ob Sie versuchten, Code von this developer page zu verwenden. Aber es scheint, dass Sie übersehen haben, dass es viel mehr Javascript benötigt, um ein Eingabefeld als Canvas-Grafikelement zu simulieren. Schauen Sie sich this Git repository an, um den ganzen Code zu sehen.

Ich habe eine CodePen showing how to put a text input inside a canvas mit dieser Technik gemacht. Für eine schnelle Demo fügen Sie dieses Skript-Tag zu Ihrem HTML-Code hinzu (Sie möchten den Code später vielleicht selbst hosten):

Quelle

2016-05-28 09:38:44

So erstellen Sie Textfelder in Canvas

Antwort

Verwandte Themen