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

Question

2 कैनवस है, एक एचटीएमएल विशेषताओं 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 विशेषताओं, चौड़ाई या कैनवास के समन्वय प्रणाली की ऊंचाई निर्धारित जबकि सीएसएस गुण सिर्फ बॉक्स जिसमें यह दिखाया जाएगा का आकार निर्धारित।

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

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

Answer 2

को height विशेषता डिफ़ॉल्ट सेट करने के width और height आप की जरूरत है, तो आप उपयोग कर सकते हैं

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

Answer 3

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

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

Answer 4

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

उदाहरण के लिए, इस (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 के बराबर होती है।यदि इन विशेषताओं को निर्दिष्ट नहीं किया गया है तो वे 300 और के height पर डिफ़ॉल्ट होंगे।

Answer 5

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

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

Answer 6

Shannimal सुधार

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

Answer 7

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

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

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

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