帆布使用CSS但正常爲「寬度」 /「高度」屬性時拉伸

Question

我有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。內容在300x300畫布上使用JavaScript繪製。

爲什麼會有顯示差異？

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。這些屬性在指定時必須具有值有效的非負整數。必須使用解析非負整數的規則來獲取它們的數值。如果某個屬性缺失，或者解析其值時返回錯誤，則必須使用默認值。該width屬性默認爲300，height屬性默認爲150

Answer 2

要設置width和height你需要，你可以使用

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

Answer 3

畫布會被拉伸，如果你設置寬度和你的CSS中的高度。如果要動態操縱畫布的尺寸，你必須使用JavaScript像這樣：

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

Answer 4

對於<canvas>元素，width和height的CSS規則設置畫布元素的實際大小將被吸引到這一頁。另一方面，width和height的HTML屬性設置畫布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>

兩者有相對於canvas元素的內部座標上畫出他們同樣的事情。但是在第二個畫布中，紅色矩形的寬度會增加兩倍，因爲整個畫布通過CSS規則被拉伸到更大的區域。

注意：如果未指定width和/或height的CSS規則，那麼瀏覽器將使用HTML屬性大小的元素，使得1個單位，這些值等於在頁面上1px的。如果這些屬性未被指定，那麼它們將默認爲width的300和height的150。

Answer 5

瀏覽器使用css寬度和高度，但canvas元素根據畫布寬度和高度進行縮放。在JavaScript中，閱讀CSS的寬度和高度，並設置畫布的寬度和高度。

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

如果你想基於動態行爲，如CSS媒體查詢，請勿使用畫布寬度和高度屬性。使用CSS規則，然後，讓畫布渲染上下文之前，分配給width和height屬性CSS的寬度和高度風格：

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

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

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