क्या मैं कैनवास के अंदर एक HTML बटन डाल सकता हूं?

Question

मैं उस गेम के लिए बटन बनाना चाहता हूं जो मैं वास्तविक HTML बटन के रूप में बना रहा हूं, लेकिन उन्हें कैनवास के अंदर होना चाहिए।

मैं यह करने के बारे में कैसे जाउंगा?

Answer 1

यह देखते हुए कि canvas element एक transparent content model है, यह वापस आने तत्व है जो घटना है कि canvas तत्व असमर्थित है में प्रदर्शित किए जाते हैं हो सकता है। वे नहीं प्रदर्शित होंगे यदि कैनवास समर्थित है।

आप कैनवास के माता-पिता से संबंधित एचटीएमएल तत्वों को कैनवास पर "होवरिंग" बटन रखने के लिए स्थिति दे सकते हैं। एक menu element नियंत्रण की एक सूची प्रस्तुत करने के लिए संदर्भ के आधार पर एक उचित रूप से अर्थ तत्व हो सकता है:

_HTML:

<div id="container"> 
    <canvas id="viewport"> 
    </canvas> 
    <menu id="controls"> 
    </menu> 
</div> 

_{सीएसएस:}

#container 
{ 
    height: 400px; 
    position: relative; 
    width: 400px; 
} 
#viewport 
{ 
    height: 100%; 
    width: 100%; 
} 
#controls 
{ 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 

Answer 2

कैनवास के अंदर एचटीएमएल संभव नहीं है, लेकिन हो सकता है कि आप अपने तत्वों को पूरी तरह से स्थापित कर सकें ताकि वे कैनवास पर "फ़्लोटिंग" कर सकें, लेकिन इसके अंदर नहीं।

Answer 3

मुझे विश्वास नहीं है कि आप एक कैनवास टैग के अंदर HTML सामग्री डाल सकते हैं। जो भी आप वहां डालते हैं, वास्तव में प्रदर्शित किया जाएगा यदि ब्राउज़र <canvas> का समर्थन नहीं करता है।

हालांकि, आप अपने बटन को कैनवास के शीर्ष पर पूरी तरह से स्थानांतरित कर सकते हैं या अपने कैनवास में ऐसे क्षेत्रों को प्रस्तुत कर सकते हैं जो बटन की तरह दिखते हैं और ईवेंट को स्वयं (बहुत सारे काम) को संभालते हैं।

Answer 4

एचटीएमएल कैनवास के अंदर संभव नहीं है।
लेकिन यदि आप वास्तव में बटन का उपयोग करना चाहते हैं, तो आप कैनवास के शीर्ष पर बटन को स्थानांतरित करने का प्रयास क्यों नहीं करते?

Answer 5

आप कैनवास एक z-index जो बटन के z-index तुलना में कम है देकर canvas के शीर्ष पर बटन रख सकते हैं:

<canvas style="z-index:1"></canvas> 
<input type="button" style="z-index:2; position:absolute; top:x; left:y" value="test"/> 

जहां x और y नंबर दिए गए हैं।

Answer 6

एक तरह से कैनवास के शीर्ष पर गतिशील बटन जोड़ने के लिए अगले दो अंक पीछा कर रहा है: 1. बटन कैनवास 2. स्थिति बटन वांछित शीर्ष के साथ पूर्ण स्थिति का उपयोग कर की तुलना में अधिक की zindex बनाना और बाएं मूल्य

Jsfiddle: https://jsfiddle.net/n2EYw/398/

HTML:

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

सीएसएस:

canvas { 
    border: 1px dotted black; 
    background: navy; 
} 

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

var $testButton = $('<input/>').attr({ 
    type: 'button', 
    name: 'btn1', 
    value: 'TestButton', 
    id: 'testButton', 
    style: 'position:absolute; top:50px;left:100px; zindex:2' 
}); 
$('body').append($testButton); 
$(document).on("click", "#testButton", function() { 
    alert('button clicked'); 
});