एचटीएमएल 5

Question

के कैनवास के अंदर कैनवास क्या हम मौजूदा कैनवास के अंदर कैनवास लगा सकते हैं? अगर हम कर सकते हैं, तो कृपया इसे html5 में करने में मदद करें।

Answer 1

आपके प्रश्न की व्याख्या करने के दो संभावित तरीके हैं। एक यह है कि आप का मतलब है वास्तव में घोंसला canvas तत्वों खुद को, इस तरह के:

<canvas id="outer"> 
    <canvas id="inner"></canvas> 
</canvas> 

यह (validator.nu के अनुसार) कानूनी है, लेकिन व्यर्थ। canvas तत्व के अंदर सामग्री फ़ॉलबैक के लिए है। canvas तत्व के अंदर सामग्री का उपयोग करने का एकमात्र तरीका यह है कि यदि ब्राउज़र canvas का समर्थन नहीं करता है, तो इस स्थिति में आंतरिक canvas तत्व वैसे भी नहीं देखा जाएगा।

आपके प्रश्न की व्याख्या करने का दूसरा संभावित तरीका यह है कि आप एक कैनवास पर दिखाए गए चित्र को दूसरे के भीतर प्रदर्शित कर सकते हैं। यह काफी सरल है, canvas तत्व को context.drawImage() पर पहले पैरामीटर के रूप में उपयोग किया जा सकता है। आप दो canvas तत्वों है:

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

फिर this script (using jQuery) पहले canvas पर आकर्षित करेगा और फिर दूसरी canvas के लिए एक छवि के रूप में है कि चार बार जोड़ें:

var c1 = $('#c1'); 
var ctx1 = c1[0].getContext('2d'); 

ctx1.fillRect(50,50,100,100); 

var c2 = $('#c2'); 
var ctx2 = c2[0].getContext('2d'); 

ctx2.drawImage(c1[0],0,0,100,100); 
ctx2.drawImage(c1[0],100,0,100,100); 
ctx2.drawImage(c1[0],0,100,100,100); 
ctx2.drawImage(c1[0],100,100,100,100); 

लेकिन फिर, आप क्यों करेंगे? आप just using one ऊपर दूसरा canvas की छवि को दोहराने कर सकते हैं:

var c1 = $('#c1'); 
var ctx1 = c1[0].getContext('2d'); 

ctx1.fillRect(25,25,50,50); 
ctx1.fillRect(125,25,50,50); 
ctx1.fillRect(25,125,50,50); 
ctx1.fillRect(125,125,50,50); 

तो सारांश में: हाँ, यह संभव है, लेकिन यह सरल प्रयोग में वास्तव में आवश्यक नहीं है।

Answer 2

यह किसी अन्य कैनवास के अंदर एक कैनवास घोंसला करने के लिए बिल्कुल व्यर्थ होगा। पृष्ठ केवल canvas टैग के अंदर क्या देखता है यदि ब्राउज़र canvas का समर्थन नहीं करता है।
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>