कैनवास तत्व के अंदर इनपुट फॉर्म

Question

मुझे आश्चर्य है कि उपयोगकर्ता से इनपुट प्राप्त करने का कोई तरीका था, अधिमानतः एक टेक्स्टबॉक्स (या कहीं भी उपयोगकर्ता देख सकता है कि वह क्या लिख ​​रहा है) जावास्क्रिप्ट के माध्यम से कैनवास तत्व में।

Answer 1

पूर्ण स्थिति का उपयोग कर कैनवास तत्व के शीर्ष पर एक टेक्स्टबॉक्स को स्थिति दें।

<div style="position:relative;width:800px;height:800px"> 
    <canvas width="800" height="800"></canvas> 
    <input type="text" style="position:absolute;left:100px;top:300px;width:600px; etc...." /> 
</div> 

यह आप किस स्थिति में है <div> आधार पर जहां अपने से अधिक बातें पॉप अप करने के लिए जा रहा के साथ

, मैं शायद यह भी एक मॉडल पृष्ठभूमि जोड़ना होगा ...

:

मेरे द्वारा सुझाए गए लेआउट कुछ की तरह है

उम्मीद है कि यह मदद करता है-

Answer 2

प्रश्न थोड़ा पुराना है, लेकिन मैं पूर्ण स्थिति के लिए एक विकल्प प्रदान करना चाहता था। आप पृष्ठभूमि-छवि सेट कर सकते हैं (संभावित रूप से आपके टेक्स्टबॉक्स से बड़ा div)। यहाँ एक उदाहरण है:

HTML:

...<canvas id="canvas"></canvas> <div id="backDrop">...[your textbox]</div>... 

जावास्क्रिप्ट:

$('#backDrop').css('background-image', 'url(' + document.getElementById('canvas').toDataURL() + ')'); 

यहाँ एक jsfiddle एक उदाहरण के रूप में है।

जैसा कि here उल्लेख किया गया है, यह आवश्यक रूप से कैनवास का एक स्नैपशॉट लेता है जब आप पृष्ठभूमि-छवि गुण सेट करते हैं। पृष्ठभूमि-छवि को सेट करने के बाद आप कैनवास में किए गए किसी भी बदलाव को प्रतिबिंबित नहीं करेंगे (जब तक कि आप इसे फिर से सेट न करें), लेकिन संभवतः यह संभव है कि आप ज्यादातर मामलों में क्या चाहते हैं।

Answer 3

आपको निम्न के साथ प्रयास कर सकते हैं:

<div style="margin:0px;padding:0px;position:absolute;width:[amount by programmer];height:[amount by programmer];border-style:solid;border-color:[if wanted];"> 
<canvas style="width:700px;height:700px;"></canvas> 
<input type="text" style="position:absolute;width:[amount by programmer];height:[amount by programmer];"/></div> 

Answer 4

एक कैनवास इनपुट पुस्तकालय नहीं है। यह किसी भी डोम तत्वों का उपयोग नहीं करता है, लेकिन पूरी तरह से कैनवास पर बनाया गया है। आप इसके बारे में और अधिक पढ़ सकते हैं और इसे http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input पर डाउनलोड कर सकते हैं। यह खुला स्रोत है।