एचटीएमएल 5 कैनवास माता-पिता

का आकार बदलना चाहते हैं, मैं कैनवास तत्व का आकार बदलना चाहता हूं ताकि अगर उसके माता-पिता फिट हो जाएं, चाहे यह <body> ("पूर्ण-स्क्रीन") या कुछ <div> उदाहरण के लिए है। यह मेरा प्रयास है:एचटीएमएल 5 कैनवास माता-पिता

// called at each frame 
function update() { 
    var canvasNode = document.getElementById('mycanvas'); 
    canvasNode.width = canvasNode.parentNode.clientWidth; 
    canvasNode.height = canvasNode.parentNode.clientHeight; 
}

किसी कारण से, कैनवास बढ़ना बंद नहीं होता है! शायद client* सही पैरामीटर नहीं हैं?

कार्रवाई यहाँ में कोड देखें: http://jsfiddle.net/ARKVD/24/

स्रोत

2011-12-24 Giovanni Funchal

यदि कैनवास '155px' ऊंचा है, तो शरीर' 160px' ऊंचा है, जो हर समय कैनवास बढ़ता रहता है (प्रत्येक बार कैनवास बढ़ने पर शरीर को '5px' लगता है)। मुझे नहीं पता कि क्यों, हालांकि, आपने '0px' पर सभी मार्जिन/पैडिंग सेट की हैं। (यह क्रोम पर है।) – pimvdb

धन्यवाद, लिनक्स/फ़ायरफ़ॉक्स पर, मैं या तो 4px या 3px ऑफ़सेट देख रहा हूं (इस पर निर्भर करता है कि मेरी विंडो अधिकतम है या नहीं) ... परेशान! –

अजीब चीज है, अगर कैनवास '0px' की ऊंचाई पर सेट है, तो शरीर' 20px' ऊंचा है। यदि कैनवास वास्तव में हटा दिया जाता है तो शरीर केवल 0px' तक गिर जाता है। – pimvdb

सबसे आसान काम करने के लिए हमेशा अपने div में कैनवास रखने के लिए है।

एकमात्र चीज जो कभी भी इस div में होगी कैनवास है।

फिर आप डीवी का आकार बदलने के लिए सीएसएस का उपयोग कर सकते हैं, हालांकि आप चाहते हैं। आप इसे शरीर के रूप में बड़ा चाहते हैं? Div width: 100% दें।

तो फिर तुम हमेशा हक कर सकते हैं:

canvas.width = theDiv.clientWidth; 
canvas.height = theDiv.clientHeight;

आप इस आप अजीब मुद्दों है कि आप वर्तमान में सामना कर रहे हैं जब शरीर div के प्रत्यक्ष जनक है के बारे में चिंता करने की ज़रूरत नहीं रखेंगे।

स्रोत

2011-12-24 19:01:30

क्या आप समझा सकते हैं कि यह शरीर के साथ क्यों काम नहीं करता है (यानी डीआईवी की आवश्यकता क्यों है)? –

यदि आप इसे जितना बड़ा चाहते हैं उतना बड़ा होना चाहिए क्योंकि शरीर में div है, तो यह आसान बनाता है क्योंकि आप सीएसएस के साथ चौड़ाई और ऊंचाई निर्दिष्ट कर सकते हैं (जैसे 100% चौड़ाई और इसी तरह)। 100% चौड़ाई जरूरी नहीं है कि यह शरीर के 'क्लाइंटविड्थ' के रूप में बड़ी हो। इसकी बजाय इसे "युक्त ब्लॉक" के रूप में बड़ा बनाता है क्योंकि इसे सीएसएस स्पेक में कहा जाता है, जो ग्राहक की तुलना में अलग (छोटा) होता है और शरीर की ऊंचाई। इसके साथ शुरू करें: http://jsfiddle.net/9FyNZ/ –

धन्यवाद! इसने मुझे बहुत परेशान करने वाला मुद्दा हल किया। – Brad

मुझे एक ही समस्या हो रही है, और इसके आस-पास काम करने का एकमात्र तरीका यह है कि कैनवास ऊंचाई को माता-पिता को सेट करना था - 1. यह सीईएफ का उपयोग कर रहा था। this बेला में मैं parentHeight के लिए सेट किया था - 5.

canvasNode.height = div.clientHeight - 5;

स्रोत

2014-09-29 10:04:45 Sam

आप माता-पिता नोड और चाइल्ड नोड के बीच सर्कुलर निर्भरता को तोड़ कर समस्या वैकल्पिक हल कर सकते हैं। डीओएम तत्वों के आकार आवंटन को केवल ऊपर-नीचे (माता-पिता से बच्चे तक) प्रचार करना चाहिए। आप यह सुनिश्चित कर सकते हैं कि बच्चे तत्व (कैनवास)

canvasNode.style.position = 'absolute';

यह अपने स्वयं के दस्तावेज़ प्रवाह माता-पिता से स्वतंत्र है कि में कहते हैं की स्थापना करके माता-पिता के आकार को प्रभावित नहीं करता।

स्रोत

2017-07-25 21:19:05 Imran

मैं पाया है कि साफ दृष्टिकोण बस कैनवास तत्व कितना बड़ा यह आकार बदलने पर होना चाहिए था "याद दिलाना" के लिए है:

window.onresize = function() { 
    canvas.style.width = '100%'; 
    canvas.height = canvas.width * .75; 
}

ऊंचाई इस मामले में की स्थापना वहाँ केवल एक 4 बनाए रखने के लिए है : 3 अनुपात। यदि आप चाहें तो निश्चित रूप से, इसे 100% भी बना सकते हैं।

स्रोत

2017-11-09 23:24:07

एचटीएमएल 5 कैनवास माता-पिता

उत्तर

संबंधित मुद्दे