सीएसएस का उपयोग करते समय कैनवास बढ़ाया जाता है लेकिन "चौड़ाई" / "ऊंचाई" गुणों के साथ सामान्य है

Question

मेरे पास 2 कैनवस हैं, एक HTML विशेषताओं का उपयोग करता है widthऔर heightइसे आकार देने के लिए, दूसरा सीएसएस का उपयोग करता है:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 यह प्रदर्शित करता है, लेकिन यह compteur2 नहीं होना चाहिए। सामग्री 300x300 कैनवास पर जावास्क्रिप्ट का उपयोग करके तैयार की गई है।

प्रदर्शन अंतर क्यों है?

Answer 1

ऐसा लगता है कि widthऔर heightविशेषताएँ कैनवास की समन्वय प्रणाली की चौड़ाई या ऊंचाई निर्धारित करती हैं, जबकि CSS गुण केवल उस बॉक्स के आकार को निर्धारित करते हैं जिसमें इसे दिखाया जाएगा।

इसे http://www.whatwg.org/html#attr-canvas-width (JS की जरूरत है) या http://www.whatwg.org/c#attr-canvas-width (शायद आपका कंप्यूटर खा जाएगा ) में समझाया गया है :

canvasतत्व तत्व के बिटमैप के आकार को नियंत्रित करने के दो गुण होते हैं: widthऔर height। निर्दिष्ट किए जाने पर, इन विशेषताओं में ऐसे मान होने चाहिए जो मान्य गैर-नकारात्मक पूर्णांक हैं । गैर नकारात्मक पूर्णांक पार्स करने के लिए नियमों को उनके संख्यात्मक मान प्राप्त करने के लिए इस्तेमाल किया जाना चाहिए। यदि कोई विशेषता अनुपलब्ध है, या यदि उसका मान पार्स कर रहा है, तो त्रुटि आती है, तो इसके बजाय डिफ़ॉल्ट मान का उपयोग किया जाना चाहिए। width300 विशेषता चूक, और height150 विशेषता चूक।

Comments

वास्तव में .. मैंने हमेशा सोचा था कि "चौड़ाई" और "ऊँचाई" जैसी प्रत्यक्ष विशेषताओं को हाल ही के HTML संस्करणों में

— चित्रित किया गया था

ओह, जाहिरा तौर पर यह वास्तव में whatwg.org/specs/web-apps/current-work/multipage/… (अनुभाग #attr-canvas-width) में वर्णित है । परेशानी यह है कि मैंने widthपहले गलत पर क्लिक किया और #dom-canvas-widthइसके बजाय अनुभाग पर गया। दायर w3.org/Bugs/Public/show_bug.cgi?id=9469 इसके बारे में।

— सैमबीएन

ऐसा API होना जो दिखता-जैसा हो लेकिन मूल रूप से दूसरे (css चौड़ाई, ऊंचाई) के लिए अलग-अलग हो। वाह।

— बेन एस्टन

जब आप आंतरिक समन्वय प्रणाली को अलग करना चाहते हैं, तो इसे समय के लिए अलग करना महत्वपूर्ण है। (यानी रेटिना डिस्प्ले या 8 बिट स्टाइल गेम के लिए)

— सैमी बेनचेरीफ

यह वाकई भ्रामक था। हम जहां सीएसएस में चौड़ाई और ऊंचाई निर्धारित करने की कोशिश कर रहे हैं। चौड़ाई और ऊंचाई के बारे में इन 2 अलग-अलग व्याख्याओं के बारे में जानने के लिए हमें 2 दिनों के बाल खींच तनाव ले लिया। बस वाह ...

— NME न्यू मीडिया एंटरटेनमेंट

Answer 2

सेट करने के लिए widthऔर heightआप की जरूरत है, आप का उपयोग कर सकते हैं

canvasObject.setAttribute('width', '475');

Comments

+1 el.setAttribute('width', parseInt($el.css('width')))ने चाल

— चली

क्या होगा यदि मैं चाहता हूं कि मेरे कैनवास का एक रिश्तेदार आकार हो? यह कहना है, कैसे एक width: 100%;css संपत्ति की नकल करने के लिए ?

— मैक्सबस्टर

शानदार उत्तर, लेकिन कैनवस जोड़ने के लिए मत भूलना। Inject। ऑफसेट ('ऊंचाई', '123') भी!

— टॉम वेल्स

मुझे नहीं लगता कि आपको .setAttribute () का उपयोग करने की आवश्यकता है। मैंने हमेशा। रिचार्ज और .he गुण का उपयोग किया है

— Zorgatone

सादा जावास्क्रिप्ट (बिना jQuery) का उपयोग संस्करण getComputedStyle : canvas.setAttribute('width', window.getComputedStyle(canvas, null).getPropertyValue("width"));। ऊंचाई के लिए दोहराएं।

— बेन जे। जूल

Answer 3

के लिए <canvas>तत्वों, के लिए सीएसएस नियम widthऔर heightकैनवास तत्व है कि पेज के लिए तैयार हो जाएगा के वास्तविक आकार निर्धारित किया है। दूसरी ओर, HTML के गुण widthऔर heightसमन्वय प्रणाली या 'ग्रिड' है कि कैनवास एपीआई का उपयोग करेगा के आकार निर्धारित किया है।

उदाहरण के लिए, इस पर विचार करें ( jsfiddle ):

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

दोनों में कैनवास तत्व के आंतरिक निर्देशांक के सापेक्ष उन पर एक ही चीज खींची गई है। लेकिन दूसरे कैनवास में, लाल आयत दो बार चौड़ी होगी क्योंकि एक पूरे के रूप में कैनवास सीएसएस नियमों द्वारा एक बड़े क्षेत्र में फैला हुआ है।

नोट: यदि सीएसएस नियमों के लिए widthऔर / या heightनिर्दिष्ट नहीं है, तो ब्राउज़र तत्व को आकार देने के लिए HTML विशेषताओं का उपयोग करेगा जैसे कि इन मूल्यों की 1 इकाई पृष्ठ पर 1px के बराबर होती है। इन विशेषताओं का उल्लेख नहीं किया तो वे एक लागू हो जाएगी widthकी 300और एक heightके 150।

Answer 4

यदि आप अपने सीएसएस में चौड़ाई और ऊंचाई निर्धारित करते हैं तो कैनवास बढ़ाया जाएगा। यदि आप गतिशील रूप से कैनवास के आयाम में हेरफेर करना चाहते हैं, तो आपको जावास्क्रिप्ट का उपयोग करना होगा:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

Comments

महान! इस उत्तर के लिए धन्यवाद। मुझे छवि को फैलाने से बचने के लिए canvas.setAttributeपहले रखना था canvas.getContext('2d')।

— hhh

Answer 5

ब्राउज़र सीएसएस की चौड़ाई और ऊंचाई का उपयोग करता है, लेकिन कैनवास की चौड़ाई और ऊंचाई के आधार पर कैनवास तत्व तराजू। जावास्क्रिप्ट में, सीएसएस की चौड़ाई और ऊंचाई पढ़ें और उस पर कैनवास की चौड़ाई और ऊंचाई सेट करें।

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Answer 6

शनीमल सुधार

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

Answer 7

सीएसएस कैनवास तत्व की चौड़ाई और ऊंचाई निर्धारित करता है ताकि यह सब कुछ तिरछा खींचते हुए समन्वय स्थान को प्रभावित करे

वेनिला जावास्क्रिप्ट के साथ चौड़ाई और ऊंचाई निर्धारित करने के तरीके के बारे में यहां मेरा तरीका है

canvas.width = numberForWidth

canvas.height = numberForHeight

Answer 8

यदि आप एक गतिशील व्यवहार चाहते हैं, उदाहरण के लिए, CSS मीडिया क्वेरीज़, कैनवास की चौड़ाई और ऊँचाई विशेषताओं का उपयोग न करें। सीएसएस नियमों का उपयोग करें और फिर, कैनवास रेंडरिंग संदर्भ प्राप्त करने से पहले, चौड़ाई और ऊंचाई को निर्दिष्ट करें सीएसएस की चौड़ाई और ऊंचाई शैलियों को देखें:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...

Comments

यह स्पष्ट है कि एक कैनवास को एक डिफ़ॉल्ट समन्वय आकार (300 x 150) मिलेगा यदि आकार केवल सीएसएस में निर्दिष्ट है। हालाँकि, यह सुझाव मेरे लिए कारगर नहीं है, लेकिन इसका समाधान नीचे दिया गया है।

— लिंडबर्ग

@PerLindberg - यदि आप कैनवास तत्व के लिए पिक्सेल में सीएसएस की चौड़ाई और ऊँचाई को परिभाषित करते हैं तो यह समाधान काम करता है।

— मानोलो