कैनवास को माता-पिता जितना चौड़ा और ऊंचा बनाएं

Question

मैं एक प्रगति पट्टी का अनुकरण करने के लिए एक आयताकार कैनवास बनाना चाहूंगा, लेकिन ऐसा लगता है जब मैंने कैनवास की चौड़ाई और ऊंचाई को 100% पर सेट किया है, तो यह वास्तव में इसे माता-पिता के रूप में उच्च और व्यापक नहीं बनाता है

कृपया नीचे दिए गए उदाहरण देखें
http://jsfiddle.net/PQS3A/

क्या गैर-वर्गीय कैनवास बनाना भी संभव है? मैं कैनवास की ऊंचाई और चौड़ाई को हार्डकोड नहीं करना चाहता, क्योंकि मोबाइल उपकरणों सहित बड़ी या छोटी स्क्रीन में देखे जाने पर इसे गतिशील रूप से बदलना चाहिए

Answer 1

यहां समस्याओं को ठीक करने वाला एक कार्य उदाहरण दिया गया है:

http://jsfiddle.net/PQS3A/7/

आपको अपने उदाहरण के साथ कई समस्याएं थीं:

1. A के <div>पास heightया widthगुण नहीं हैं । आपको सीएसएस के माध्यम से उन्हें सेट करने की आवश्यकता है।
2. यहां तक ​​कि अगर डिव सही ढंग से आकार में थे, तो यह डिफ़ॉल्ट का उपयोग कर रहा था position:static, जिसका अर्थ है कि यह किसी भी बच्चों की स्थिति का अभिभावक नहीं है। यदि आप चाहते हैं कि कैनवास div के समान आकार का हो, तो आपको div को position:relative(या absoluteया fixed) सेट करना होगा ।
3. widthऔर heightपर एक कैनवास विशेषताएं (एक छवि में वास्तविक पिक्सल) की तरह करने के लिए आकर्षित करने के लिए डेटा की पिक्सेल की संख्या निर्दिष्ट करें, और से अलग हैं प्रदर्शन आकार कैनवास के। इन विशेषताओं को पूर्णांक पर सेट किया जाना चाहिए।

ऊपर दिए गए उदाहरण से जुड़ा डिव आकार सेट करने के लिए CSS का उपयोग करता है और इसे एक अभिभावक बनाता है। यह एक जेएस फ़ंक्शन बनाता है (नीचे दिखाया गया है) दोनों एक कैनवास को उसी आकार के प्रदर्शन के रूप में सेट करते हैं, जो उसके तैनात माता-पिता के समान है, और फिर आंतरिक widthऔर heightगुणों को समायोजित करता है, ताकि पिक्सेल की समान संख्या हो जैसा कि वह दिखाता है।

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

Comments

अरे वाह, मैं रिश्तेदार या निरपेक्ष becuase के लिए स्थिति नहीं था मुझे लगता है कि डिफ़ॉल्ट रूप से div टैग बच्चे के तत्व को शामिल करने के लिए खिंचाव होगा, तो यह मामला नहीं है? यदि यह स्थिर स्थिति है तो यह बच्चे को अपनी सीमा से आगे बढ़ने देगा। मैंने सोचा था कि स्थिति का शाब्दिक रूप से सिर्फ स्थिति के साथ क्या करना है, और जो मुझे संग्रह करना था वह सिर्फ माता-पिता के रूप में व्यापक और उच्च बनाना है। तो मुझे लगता है कि स्थिति यह भी निर्धारित करती है कि बाल तत्व (डिव टैग के भीतर) चौड़ाई और ऊंचाई के लिए क्या संदर्भ देगा ??

— user1118019

@ user1118019 मैं पूरी तरह से समझ नहीं पाया कि आपने क्या लिखा है, लेकिन यहाँ कुछ मुख्य विवरण हैं। जो तत्व हैं display:blockऔर कोई सीएसएस widthनिर्दिष्ट विस्तार नहीं है उनके कंटेनर के रूप में विस्तृत होने के लिए। heightनिर्दिष्ट सीएसएस के बिना कंटेनर तत्व केवल उनकी सामग्री के समान लंबे होते हैं; जिन सामग्रियों की प्रतिशत ऊँचाई होती है, वे height:0उस समय के समतुल्य होते हैं, जब यह पता चलता है कि यह कितना लंबा होना चाहिए। जब भी आप पूर्ण स्थिति या प्रतिशत आयाम का उपयोग करते हैं, तो उन्हें "ऑफसेट अभिभावक" के सापेक्ष गणना की जाती है; डिफ़ॉल्ट रूप से, शरीर एकमात्र ऑफसेट अभिभावक है।

— फ्रॉग्ज

@ user1118019 तत्व जो हैं position:static(सभी तत्वों का डिफ़ॉल्ट मान और व्यवहार) एक नया पोजिशनिंग सिस्टम शुरू नहीं करते हैं, लेकिन position:relative(अन्यथा तत्व के प्रदर्शन को बदले बिना) करते हैं। उदाहरण के लिए, यह डेमो देखें । ध्यान दें कि #a1शरीर को किस तरह से तैनात और आकार दिया जाता है, इसकी अनदेखी <div>। ध्यान दें कि #b1इसके कंटेनर के बजाय कैसे तैनात और आकार में है, दोनों के बीच एकमात्र अंतर है #b { position:relative}।

— फ्रॉग्ज

धन्यवाद Phrogz ... मुझे अब यह मिल गया है, आप अपना समय निकालने और मुझे चीजों को समझाने के लिए धन्यवाद, वास्तव में इसकी सराहना करते हैं

— user1118019

"यहां तक ​​कि अगर डिव सही ढंग से आकार में थे, तो यह डिफ़ॉल्ट स्थिति का उपयोग कर रहा था: स्थिर, जिसका अर्थ है कि यह किसी भी बच्चों की स्थिति माता-पिता नहीं है" smh ... क्यों थियो, सीएसएस? मैं केवल आपके लिए अच्छा रहा हूं।

— CCJ

Answer 2

यदि आप वास्तव में मूल तत्व के रूप में बड़े होना चाहते हैं तो कैनवास की विशेषताओं widthऔर heightविशेषताओं का उपयोग करें । आप उन्हें JQuery का उपयोग करके सेट कर सकते हैं ।

$(document).ready(function() {
  var canvas = document.getElementById("theCanvas");
  canvas.width = $("#parent").width();
  canvas.height = $("#parent").height();
});

यदि आप JQuery को नहीं जानते हैं , तो निम्नलिखित जावास्क्रिप्ट का उपयोग करें:

var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

यदि आप cssऊंचाई और चौड़ाई विशेषताओं का उपयोग करते हैं style="width:100%; height:100%;", तो आप बस कैनवास खींच रहे हैं। यह सब कुछ आप कैनवास पर आकर्षित देखने के लिए कारण होगा।

JQuery समाधान के लिए JSFiddle ।

जावास्क्रिप्ट समाधान के लिए JSFiddle ।

Comments

मैंने देखा कि प्रश्नकर्ता ने jquery का संदर्भ नहीं दिया था और इसलिए शायद इसके बारे में नहीं जानता। उन्हें एक शुद्ध जावास्क्रिप्ट विधि की आवश्यकता हो सकती है।

— jing3142

@ jing3142 अच्छी कॉल। मैंने JQuery समाधान और गैर- JQuery समाधान दोनों के साथ अद्यतन किया है।

— ब्रेंट ऑलसेन

ध्यान दें कि जब तक आप style=""पैरेंट पर स्पष्ट विशेषता नहीं रखते हैं या स्टाइल सेट करने के लिए JS का उपयोग करते हैं, तब तक गैर-jQuery समाधान विफल हो जाएगा । आप का उपयोग करना चाहिए getComputedStyle()या, जैसा कि मैंने अपने उत्तर में किया है, offsetWidth/ offsetHeight।

— फ्रॉग्ज

उत्तर देने के लिए धन्यवाद, मैं आपके उत्तर को स्वीकार करूंगा और यदि मैं कर सकता हूं तो पहले एक। लेकिन वैसे भी मैं उर जवाब के रूप में अच्छी तरह से अंगूठे। फिर से समझाने के लिए बहुत बहुत धन्यवाद।

— user1118019

Answer 3

टैग पर विशेषताओं के बजाय CSS गुणों का उपयोग करें:

<div style="background-color:blue;width:140px;height:20px">
    <canvas style="background-color: red;width:100%;height:100%">
    </canvas>
</div>​

वह काम करने लगता है

Comments

यह कैनवास को फिर से आकार देने के बजाय उसे खींचता जा रहा है, जिससे कैनवास पर सभी आकृतियाँ विषम दिखने लगेंगी।

— ब्रैंट ऑलसेन