Canvas ยืดออกเมื่อใช้ CSS แต่ปกติด้วยคุณสมบัติ“ ความกว้าง” /“ ความสูง”

ฉันมี 2 ผืนผ้าใบหนึ่งใช้คุณลักษณะ HTML widthและheightขนาดมันอีกใช้ CSS:

<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 เนื้อหาถูกวาดโดยใช้ JavaScript บนผืนผ้าใบขนาด 300x300

ทำไมจึงมีความแตกต่างในการแสดงผล?

ดูเหมือนว่าwidthและheightคุณลักษณะจะกำหนดความกว้างหรือความสูงของระบบพิกัดผ้าใบส่วนคุณสมบัติ CSS จะกำหนดขนาดของกล่องที่จะแสดง

นี่คือคำอธิบายที่http://www.whatwg.org/html#attr-canvas-width (ต้องการ JS) หรือhttp://www.whatwg.org/c#attr-canvas-width (อาจกินคอมพิวเตอร์ของคุณ) :

canvasองค์ประกอบมีสองคุณลักษณะในการควบคุมขนาดของบิตแมปขององค์ประกอบที่: และwidth heightแอตทริบิวต์เหล่านี้เมื่อระบุต้องมีค่าที่มีจำนวนเต็มไม่ใช่เชิงลบที่ถูกต้อง ต้องใช้กฎสำหรับการวิเคราะห์จำนวนเต็มที่ไม่ใช่ลบเพื่อรับค่าตัวเลข หากแอตทริบิวต์หายไปหรือหากการแยกวิเคราะห์ค่าส่งคืนข้อผิดพลาดจะต้องใช้ค่าเริ่มต้นแทน widthแอตทริบิวต์เริ่มต้นที่ 300 และheightค่าเริ่มต้นแอตทริบิวต์ 150

ในการตั้งค่าwidthและheightคุณต้องการคุณสามารถใช้

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

สำหรับ<canvas>องค์ประกอบกฎ CSS สำหรับwidthและheightตั้งค่าขนาดที่แท้จริงขององค์ประกอบ Canvas ที่จะถูกดึงไปยังหน้า ในทางกลับกันคุณลักษณะ HTML ของwidthและheightกำหนดขนาดของระบบพิกัดหรือ 'กริด' ที่ Canvas API จะใช้

ตัวอย่างเช่นพิจารณาสิ่งนี้ ( 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>

ทั้งสองมีสิ่งเดียวกันกับพวกเขาเมื่อเทียบกับพิกัดภายในขององค์ประกอบผ้าใบ แต่ในผืนผ้าใบที่สองสี่เหลี่ยมสีแดงจะกว้างเป็นสองเท่าเนื่องจากผ้าใบโดยรวมกำลังถูกขยายไปทั่วพื้นที่ที่ใหญ่กว่าโดยกฎ CSS

หมายเหตุ: หากไม่ได้ระบุกฎ CSS สำหรับwidthและ / หรือheightเบราว์เซอร์จะใช้แอตทริบิวต์ HTML เพื่อกำหนดขนาดขององค์ประกอบที่ค่า 1 หน่วยของค่าเหล่านี้เท่ากับ 1px ในหน้า ถ้าแอตทริบิวต์เหล่านี้ไม่ได้ระบุไว้แล้วพวกเขาก็จะเริ่มต้นกับwidthของ300และของheight150

ผืนผ้าใบจะยืดถ้าคุณตั้งค่าความกว้างและความสูงใน CSS ของคุณ หากคุณต้องการจัดการมิติของผืนผ้าใบแบบไดนามิกคุณต้องใช้ JavaScript ดังนี้:

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

เบราว์เซอร์ใช้ความกว้างและความสูง css แต่องค์ประกอบผ้าใบปรับขนาดตามความกว้างและความสูงของผ้าใบ ใน javascript อ่านความกว้างและความสูงของ css และตั้งค่าความกว้างผ้าใบและความสูงเป็น

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

การแก้ไขแบบShannimal

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

CSS ตั้งค่าความกว้างและความสูงขององค์ประกอบผ้าใบเพื่อให้มีผลกับพื้นที่พิกัดโดยปล่อยทุกอย่างที่วาดเอียง

นี่คือวิธีของฉันในการตั้งค่าความกว้างและความสูงด้วย Vanilla JavaScript

canvas.width = numberForWidth

canvas.height = numberForHeight

หากคุณต้องการพฤติกรรมแบบไดนามิกโดยยึดตามเช่นคำสั่งสื่อ CSS ไม่ใช้คุณสมบัติความกว้างและความสูง ใช้กฎ CSS จากนั้นก่อนที่จะรับบริบทการเรนเดอร์ผืนผ้าใบกำหนดให้กับแอตทริบิวต์ความกว้างและความสูงสไตล์ CSS และความสูง:

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

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

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