畫布元素的設置尺寸

Question

我有一個畫布，我鏈接到JSchart。我希望通過JQuery將畫布高度和寬度設置爲動態。

HTML

<canvas id="keyFiguresChart"></canvas> 

JS

this.drawChart(); 
this.$("#keyFiguresChart").width(800); 
this.$("#keyFiguresChart").height(200); 

當我設置的屬性的高度和寬度創建圖表之前，它不工作。然後由JSchart庫計算標準高度和寬度。

在創建圖表後設置高度和寬度時，canvas的尺寸是正確的，但內容會伸展以匹配尺寸。

Answer 1

您正在設置導致其拉伸其內容的canvas的CSS width和height屬性。見jQuery的documentation：

嘗試設置元素的width和height屬性是這樣的：

// Assuming you've only got one Canvas on page. 
this.$("#keyFiguresChart").attr('width', 800); 
this.$("#keyFiguresChart").attr('height', 200);